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”类。

我试过了：

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

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

我该怎么做？

以下是获取内容的示例（部分组合）：Esample site 我想要相同的图标动画效果

由于

Answer 1

尝试：

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

Answer 2

您必须使用悬停在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 3

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

使用jQuery选择器$(".overview", this)选择当前正被鼠标悬停的.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");
});

鼠标结束时仅在特定div上触发事件

3 个答案: