Max Max - 1 year ago 54
CSS Question

When hovering over parent div change image and heading at the same time

I need to be able to change the color of the my headings and the picture when the user hovers over the parent div. It works individually meaning when I hover over id="cf" the picture changes, but not the title and visa versa but not at the same time. Any help would be appreciated.



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

To achieve this I'd suggest you instead use CSS. It was designed for the purpose of changing the UI, performs much better than JS and avoids the possible FOUC when the page loads.

To do this, you can set the default styles, then override them in the :hover pseudo-selector, like this:

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download