在父项悬停时更改子元素的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; 默认情况下,但随后更改为display: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添加JS(例如在条件注释中),它不支持:正确悬停:

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

这是一个简单的例子:小提琴

Answer 2

无需使用JavaScript或jquery,CSS就足够了:

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

看看演示

Answer 3

使用toggleClass().

$('.parent').hover(function(){
$(this).find('.child').toggleClass('color')
});

color班级在哪里 您可以根据需要设置类的样式,以实现所需的行为.该示例演示了如何在鼠标进出时添加和删除类.

点击这里的工作示例.

Answer 4

.parent:hover > .child {
    /*do anything with this child*/
}

Answer 5

不确定是否有可怕的理由这样做，但它似乎在最新版本的 Chrome/Firefox 上与我一起工作，页面上的很多元素没有任何明显的性能问题。

*:not(:hover)>.parent-hover-show{
    display:none;
}

但通过这种方式，您所需要的只是应用于parent-hover-show一个元素，其余的都被处理了，并且您可以保留您想要的任何默认显示类型，而不必它总是“块”或为每种类型创建多个类。