鼠标悬停时仅在特定 div 上触发事件

Question

我有六个列表项，我只想在鼠标悬停时为单个项目设置动画。

这是我的代码片段：

  <li>
    <div class="overview top_out">Eye</div>
    <div class="link bottom_out">link</div>
    <div class="image"></div>
  </li>
  <li>
    <div class="overview top_out">Eye</div>
    <div class="link bottom_out">link</div>
    <div class="image"></div>
  </li>
  // other same list items

我想做的是当鼠标悬停在列表项上时删除 "top_out" class。

我试过这个：

$("ul li").hover(function(){
    $(".overview").toggleClass("top_out");
});

但我得到的是所有div一起反应。

我该怎么做？

这里是获取内容的示例（投资组合部分）：Esample site 我要同款图标动画效果

谢谢

Answer 1

您必须使用悬停在 li 上的内容作为上下文：

$("ul li").hover(function(){
    $(".overview", this).toggleClass("top_out");
});

而不是 .hover(function() ... 你可能想使用：

.on('mouseenter mouseleave', function() ...

$("ul li").on('mouseenter mouseleave', function(){
    $(".overview", this).toggleClass("top_out");
});

.top_out {
  background-color: black;
  color: white;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>
    <div class="overview top_out">Eye</div>
    <div class="link bottom_out">link</div>
    <div class="image"></div>
  </li>
  <li>
    <div class="overview top_out">Eye</div>
    <div class="link bottom_out">link</div>
    <div class="image"></div>
  </li>
  </ul>

Answer 2

您似乎需要根据悬停元素的上下文来切换 class。

使用 jQuery select 或 $(".overview", this) 到 select .overview 元素当前鼠标悬停在 li 元素上。

我也将 hover 事件更改为 mouseover/mouseout。

$("ul li").on('mouseover mouseout', function () {
    $(".overview", this).toggleClass("top_out");
});

本质上等同于

$("ul li").on('mouseover mouseout', function () {
    $(this).find(".overview").toggleClass("top_out");
});

Answer 3

尝试：

$('ul li').on('mouseenter mouseleave', function() {
        $(this).find('.overview').toggleClass('top_out');
});

鼠标悬停时仅在特定 div 上触发事件

Trigger event only on specific div when mouse is over

jquery

animation