将鼠标悬停在父 div 上时，同时更改图像和标题答案

【问题标题】：When hovering over parent div change image and heading at the same time将鼠标悬停在父 div 上时，同时更改图像和标题
【发布时间】：2017-07-26 13:07:31
【问题描述】：

当用户将鼠标悬停在父 div 上时，我需要能够更改我的标题和图片的颜色。它单独工作，这意味着当我将鼠标悬停在 id="cf" 上时，图片会发生变化，但标题不会发生变化，反之亦然，但不会同时发生。任何帮助将不胜感激。

$(document).ready(function(){
  $("#cf img").hover(function(){
    $(this).css("-webkit-filter", "grayscale(0)");
  }, function(){
    $(this).css("-webkit-filter", "grayscale(1)");
  });

  $(".blue-bar-info").hover(function(){
    $(this).css("background", "pink");
  }, function(){
    $(this).css("background", "blue");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cf">
Picture
<div id="blue-bar" class="blue-bar-info">
    <div class="inner"> 
	    <h4>Title</h4> 
	    <span>Sub Title</span>
    </div> 
</div>
</div>

【问题讨论】：

您能否更具体地了解您的最终结果
我建议你不要为此使用 JS。 CSS 更适合，性能也更好

标签： javascript jquery css hover

【解决方案1】：

要实现这一点，我建议您改用 CSS。它的设计目的是为了改变 UI，性能比 JS 好得多，并且避免了页面加载时可能出现的 FOUC。

为此，您可以设置默认样式，然后在 :hover 伪选择器中覆盖它们，如下所示：

#cf img { 
  -webkit-filter: grayscale(1); 
  width: 150px;
  height: 150px;
}
#cf:hover img { -webkit-filter: grayscale(0); }

#cf .blue-bar-info { background-color: pink; }
#cf:hover .blue-bar-info { background-color: blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cf">
  <img src="https://i.imgur.com/KwkmSK4.jpg"/>
  <div id="blue-bar" class="blue-bar-info">
    <div class="inner">
      <h4>Title</h4>
      <span>Sub Title</span>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

JS 解决方案，但建议使用 CSS ;)

 $("#cf").hover(function(){
            $("#cf img").css("-webkit-filter", "grayscale(0)");
            $(".blue-bar-info").css("background", "pink");
        }, function(){
            $("#cf img").css("-webkit-filter", "grayscale(1)");
            $(".blue-bar-info").css("background", "blue");
        });

【讨论】：

【解决方案3】：

这样的？

  $(document).ready(function () {
        $("#cf img, .blue-bar-info").hover(function () {
            $('#cf img').css("-webkit-filter", "grayscale(0)");
            $('.blue-bar-info').css("background", "pink");
        }, function () {
            $('#cf img').css("-webkit-filter", "grayscale(1)");
            $('.blue-bar-info').css("background", "blue");
        });
    });

【讨论】：

【解决方案4】：

我相信您的代码没有问题，只是您在代码中为父 div 使用了错误的选择器。

$("#cf") 可以代替$("#cf img") 解决您的问题吗？

【讨论】：