jQuery：在主元素上悬停时如何悬停子元素的子元素

Question

I have this code:

$('.icon-click').mouseenter(function () {
  console.log('banana');
   $(this).hover(function(){
     $(this).children("img");
   });
});

<div class="circles-cont">
  <div class="col-sm-4 text-center icon-click">
    <p class="circle">
      <img class="search" src="http://www.clker.com/cliparts/w/N/I/K/O/9/smaller-red-button-th.png">
    </p>
    <p class="thetext">
      <span>Search</span>
      <br/>
      <span>afasfasfa</span>
    </p>
  </div>

  <div class="col-sm-4 text-center icon-click">
    <p class="circle ">
      <img class="conv" src="http://www.clker.com/cliparts/w/N/I/K/O/9/smaller-red-button-th.png">
    </p>
    <p class="thetext">
      <span>asfsfas</span>
      <br/>
      <span>asfasfasf</span>
    </p>
  </div>

  <div class="col-sm-4 text-center icon-click">
    <p class="circle ">
      <img class="local" src="http://www.clker.com/cliparts/w/N/I/K/O/9/smaller-red-button-th.png">
    </p>
    <p class="thetext">
      <span>asfasasf</span>
    </p>
  </div>

I am trying to get the result of the img:hover for each element sepretly only when hovering on it's main .icon-click element.

https://jsfiddle.net/0rwe5z23/2/

Answer 1

You can't use hover to take effect of the :hover selecter on css classes. But you can create a class with your changes and redirect this by jQuery's $.hover function to the elements you want.

$(".icon-click").hover(function() {
    $(this).find("img").addClass("hovered");
}, function() {
    $(this).find("img").removeClass("hovered");
});

Working example.

But you can even do the whole thing without js. Just use the :hover on the parent. Like this:

.icon-click:hover img {
    background-color: black;
}

Working example.