在父元素悬停时更改子元素的CSS?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (17)

首先,我假设这对于CSS 3来说太复杂了,但是如果在某个地方有一个解决方案,我很乐意用它代替。

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;默认情况下,但当鼠标悬停在父div上时,则更改为Display:Block;。问题是,这个标记出现在我的站点上的几个地方,而且我只希望在鼠标位于它的父节点上,而不是在鼠标位于其他任何父节点上时,才显示子标记(它们都具有相同的类名,没有ID)。

我试过用$(this).children()没有结果。

$('.parent').hover(function(){
            $(this).children('.child').css("display","block");
        }, function() {
            $(this).children('.child').css("display","none");
        });
提问于
用户回答回答于

为什么不直接使用CSS呢?

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

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

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

用户回答回答于

不需要使用JavaScript或jQuery,CSS就足够了:

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

扫码关注云+社区