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>

我试图获取img的结果：只有当悬停在它的主要.icon-click元素上时，才能将每个元素悬停。

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.

jQuery：当悬停在主元素

1 个答案: