jquery - 悬停父元素时更改子元素的 CSS

Question

首先，我假设这对于 CSS3 来说太复杂了，但如果某处有解决方案，我很乐意改用它。

HTML 非常简单。

<div class="parent">
    <div class="child">
        Text Block 1
    </div>
</div>

<div class="parent">
    <div class="child">
        Text Block 2
    </div>
</div>

子div设置为display:none；默认情况下，但随后更改为显示: block ；当鼠标悬停在父 div 上时。问题是这个标记出现在我网站上的几个地方，我只希望在鼠标悬停在它的父级上时显示子级，而不是在鼠标悬停在任何其他父级上时显示(它们都具有相同的类姓名，没有 ID)。

我试过使用 $(this) 和 .children() 无济于事。

$('.parent').hover(function(){
            $(this).children('.child').css("display","block");
        }, function() {
            $(this).children('.child').css("display","none");
        });

Answer 1

为什么不直接使用 CSS？

.parent:hover .child, .parent.hover .child { display: block; }

然后为 IE6 添加不支持 :hover 的 JS(例如在条件注释中):

jQuery('.parent').hover(function () {
    jQuery(this).addClass('hover');
}, function () {
    jQuery(this).removeClass('hover');
});

这是一个简单的例子:Fiddle