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 使 :hover 选择器在 css class 上生效。但是您可以使用您的更改创建一个 class 并通过 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.

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

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

html

javascript

jquery

hover