Hola, disculpen si el título no es el mas descriptivo pero no se me ocurría ningun otro para explicar en pocas palabras mi problema.
Tengo dos div's, ambos con el mismo codigo, es decir que se ven iguales, quiero que al pasar el mouse por la imagen que se encuentra dentro del div, muestre otro div que está oculto. Esto logro hacerlo de forma satifactoria, pero con un problema: solo lo hace en un div, y no en ambos en forma INDEPENDIENTE.
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#hover").mouseover(function (){
$(".texto").slideDown("middle");
});
$("#hover").mouseout(function (){
$(".texto").slideUp("fast");
});
});
</script>
<title>Documento sin título</title>
</head>
<body>
<div class="texto" style="width:207px; position: absolute; background:#CCCCCC; display:none"><span>HOLA</span></div>
<div id="hover" style="background:#006699; z-index:-1; width: 207px; height: 111px"></div>
<br />
<div class="texto" style="width:207px; position: absolute; background:#CCCCCC; display:none"><span>HOLA</span></div>
<div id="hover" style="background:#006699; z-index:-1; width: 207px; height: 111px"></div>
<br />
</body>
</html> Asi se ve sin pasar el mouse:
Asi se ve al pasar el mouse por el DIV DE ARRIBA:
Si lo paso sobre el de abajo no logra el efecto, y al pasar el mouse por el de arriba realiza el efecto en AMBOS div's (como se ve en la segunda imagen), yo quiero que lo realice independientemente.
Ahí estoy usando CLASS en los div's ocultos, si coloco ID solo realiza el efecto en el superior, y no en el inferior (a diferencia al ID que realizaba el efecto en ambos div's).
Alguna sugerencia?
Espero no haberlos mareado!
Muchas gracias!