javascript - jQuery:当悬停在主元素上时如何悬停子元素的子元素

Question

我有这个代码:

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

我试图仅在将鼠标悬停在其主 .icon-click 元素上时分别获取每个元素的 img:hover 结果。

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

Answer 1

您不能使用 hover 来使 css 类上的 :hover 选择器生效。但是您可以使用更改创建一个类，并通过 jQuery 的 $.hover 函数将其重定向到您想要的元素。

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

Working example.

但是你甚至可以在没有 js 的情况下完成整个事情。只需在父级上使用 :hover 即可。像这样:

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

Working example.