當鼠標懸停在父div上同時更改圖像和標題

當用戶將鼠標懸停在父div上時，我需要能夠更改我的標題和圖片的顏色。當我將鼠標懸停在圖片更改的id =「cf」上時，它的作用各不相同，但不是同一時間，而是標題和反之亦然。任何幫助，將不勝感激。當鼠標懸停在父div上同時更改圖像和標題

$(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"> 
 
\t  <h4>Title</h4> 
 
\t  <span>Sub Title</span> 
 
    </div> 
 
</div> 
 
</div>

來源

2017-07-26 Max

你可能會更具體關於你的最終結果 – Prabhakaran

我建議你不要使用JS這個。 CSS更適合，並且性能更好 –

要做到這一點，我建議你改用CSS。它的目的是改變用戶界面，執行得比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>

來源

2017-07-26 13:20:40

css要好得多，這就像一個魅力。 – Max

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

來源

2017-07-26 13:12:45 guest

像這樣的事情？

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

來源

2017-07-26 13:21:41

我相信你的代碼是好的，除非你在代碼中使用了錯誤的父代div選擇器。

可以$("#cf")而不是$("#cf img")解決你的問題？

來源

2017-07-26 13:24:22 blewherself

當鼠標懸停在父div上同時更改圖像和標題

回答

相關問題