我一直在寻找这个问题的答案,但找不到简单的解决方案。我希望 div、h2 和 p 在悬停在父 div gridInner 上时改变颜色。每个人都必须独立工作。希望这可以做到。
<div class="gridOuter row">
<a href="" class="home-block-button">
<div class="gridInner first col-xs-12 col-sm-4">
<h2>Domain 1</h2>
<p>Blurb</p>
</div>
</a>
<a href="" class="home-block-button">
<div class="gridInner col-xs-12 col-sm-4">
<h2>Domain 2</h2>
<p>Bkurb 2</p>
</div>
</a>
<a href="" class="home-block-button">
<div class="gridInner last col-xs-12 col-sm-4">
<h2>Domain 3</h2>
<p>Blurb 3</p>
</div>
</a>
</div>
我试过了,但它改变了所有这些。 h2 也根本没有改变。我很感激任何帮助,因为这让我发疯。
$('.home-block-button').on('mouseover', function() {
$(this).closest('div').find('.gridInner').css({'background- color':'#302f52'});
$(this).closest('div').find('.gridInner > h2').css({'color':'#fff'});
});
最佳答案
这也可以用 css 来完成
a.home-block-button:hover .gridInner{
background-color:#302f52;
}
a.home-block-button:hover .gridInner h2{
color:#fff;
}
还是你的情况,如果你想使用js那么就这样写代码
$( "a.home-block-button" ).hover(
function() {
$(this).find('.gridInner').css({'background- color':'#302f52'});
$(this).find('.gridInner > h2').css({'color':'#fff'});
}, function() {
$(this).find('.gridInner').css({'background- color':'initial'});
$(this).find('.gridInner > h2').css({'color':'initial'});
}
);
在 initial
的地方,你可以设置鼠标离开时你想要的值。
关于jquery - 鼠标悬停时更改 DIV 的内容颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37043901/