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

  • Z时代
  • 2024-01-10
  • 分类：问答

首先，我假设对于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：block;

当鼠标悬停在父div上时。问题是此标记出现在我网站上的多个位置，并且我只希望在鼠标悬停在其父项上方时显示该子项，而不是在鼠标悬停在其他任何父项上时都显示该子项（它们都具有相同的类）名称和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; }

然后添加不支持：hover的IE6 JS（例如在条件注释中）：

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

以上是 悬停父元素时更改子元素的CSS 的全部内容， 来源链接： utcz.com/qa/429224.html

回到顶部