jquery - 鼠标悬停时更改 DIV 的内容颜色

Question

我一直在寻找这个问题的答案，但找不到简单的解决方案。我希望 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'});
});

Answer 1

这也可以用 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 的地方，你可以设置鼠标离开时你想要的值。