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>

Answer 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");
        });

Answer 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");
        });
    });

Answer 4

我相信您的代码很好，除非您在代码中为父div使用了错误的选择器。

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

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

4 个答案: