Question

我已经找到了答案但找不到简单的解决方案。我希望div，h2和p在将鼠标悬停在父div gridner上时改变颜色。每个人都必须独立工作。希望这可以做到。

<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的位置，您可以在鼠标移出时设置所需的值。

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

1 个答案: