En primer lugar, asumo que esto es demasiado complejo para CSS3, pero si hay una solución en alguna parte, me encantaría usarla.
El HTML es bastante sencillo.
<div class="parent"> <div class="child"> Text Block 1 </div> </div> <div class="parent"> <div class="child"> Text Block 2 </div> </div>El div secundario está configurado para mostrar: ninguno; por defecto, pero luego cambia a display:block; cuando se pasa el mouse sobre el div principal. El problema es que este marcado aparece en varios lugares de mi sitio, y solo quiero que el niño se muestre si el mouse está sobre su padre, y no si el mouse está sobre cualquiera de los otros padres (todos tienen la misma clase nombre y sin identificación).
Intenté usar $(this) y .children() sin éxito.
$('.parent').hover(function(){ $(this).children('.child').css("display","block"); }, function() { $(this).children('.child').css("display","none"); });¿Por qué no usar CSS?
.parent:hover .child, .parent.hover .child { display: block; }y luego agregue JS para IE6 (dentro de un comentario condicional, por ejemplo) que no admite :hover correctamente:
jQuery('.parent').hover(function () { jQuery(this).addClass('hover'); }, function () { jQuery(this).removeClass('hover'); });He aquí un ejemplo rápido: Fiddle
.parent:hover > .child { /*do anything with this child*/ }