javascript - jQuery: How to hover a child of child element when hovering on the main element -

i have 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 trying result of img:hover each element sepretly when hovering on it's main .icon-click element.

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

you can't use hover take effect of :hover selecter on css classes. can create class changes , redirect jquery's $.hover function elements want.

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

working example.

but can whole thing without js. use :hover on parent. this:

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

working example.