Mouseover - Mouseout en distintos div's

rodricrzz · #1 (**permalink**) 27/02/2012, 20:49

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&iacute;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!

hmbp22 · #2 (**permalink**) 27/02/2012, 21:56

tu codigo jquery quedaria asi:

Código HTML:

Ver original$(document).ready(function(){
    $(".hover").mouseover(function (){
        $(this).prev().slideDown("middle");
    });
    
    $(".hover").mouseout(function (){
        $(this).prev().slideUp("fast");
    });
});

y tu html asi:

Código HTML:

Ver original<div class="texto" style="width:207px; position: absolute; background:#CCCCCC; display:none"><span>HOLA</span></div>
<div class="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 class="hover" style="background:#006699; z-index:-1; width: 207px; height: 111px"></div>

Lo mismo que mencionas sobre usar class en lugar de id se aplica a los divs .
Y jQuery tiene muchos metodos para refinar/modificar las selecciones:
http://api.jquery.com/category/traversing/

rodricrzz · #3 (**permalink**) 28/02/2012, 19:31

Cita:

Iniciado por hmbp22

tu codigo jquery quedaria asi:

Código HTML:

Ver original$(document).ready(function(){
    $(".hover").mouseover(function (){
        $(this).prev().slideDown("middle");
    });
    
    $(".hover").mouseout(function (){
        $(this).prev().slideUp("fast");
    });
});

y tu html asi:

Código HTML:

Ver original<div class="texto" style="width:207px; position: absolute; background:#CCCCCC; display:none"><span>HOLA</span></div>
<div class="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 class="hover" style="background:#006699; z-index:-1; width: 207px; height: 111px"></div>

Lo mismo que mencionas sobre usar class en lugar de id se aplica a los divs .
Y jQuery tiene muchos metodos para refinar/modificar las selecciones:
http://api.jquery.com/category/traversing/

Muchas gracias por la respuesta! He probado esto que me pasaste pero ahora no me logra el efecto en ningun lado, qué está mal?

hmbp22 · #4 (**permalink**) 28/02/2012, 23:54

Que extrano, a mi me funciona bien.
Mira, es el mismo codigo:
http://jsfiddle.net/LrNGg/