javascript - 将鼠标悬停在父 div 上时同时更改图像和标题

Question

我需要能够在用户将鼠标悬停在父 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>

Answer 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>