Beim Schweben über Eltern div Bild und Überschrift gleichzeitig ändern

Question

Ich muss in der Lage sein, die Farbe der meine Überschriften und das Bild zu ändern, wenn der Benutzer über das Elternteil div. Es funktioniert individuell, dh wenn ich über id = "cf" schwebe, ändert sich das Bild, aber nicht der Titel und umgekehrt, aber nicht gleichzeitig. Jede Hilfe wäre willkommen.

$(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>

Answer 1

Um dies zu erreichen Ich würde vorschlagen, Sie stattdessen CSS verwenden. Es wurde für den Zweck der Änderung der Benutzeroberfläche entwickelt, führt viel besser als JS und vermeidet die mögliche FOUC beim Laden der Seite.

Um dies zu tun, können Sie die Standardformate festgelegt, dann außer Kraft setzen sie in der :hover Pseudo-Selektor, wie folgt aus:

#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 Lösung, aber empfehlen die Verwendung CSS hierfür ist;)

$("#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

So etwas wie das?

$(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

Ich glaube, Ihr Code ist in Ordnung, außer Sie für Eltern div in Ihrem Code falsch Selektor verwenden.

Kann $("#cf") statt $("#cf img") Ihr Problem lösen?