在jquery麻烦中悬停开/关

【问题标题】：Hovering on/off in jquery trouble在jquery麻烦中悬停开/关
【发布时间】：2017-06-13 19:18:59
【问题描述】：

我试图弄清楚如何仅在鼠标悬停在某个 div 上时激活悬停状态，并在鼠标离开该 div 时重置。我有 2 个并排的 div，.purple 和 .orange，每个都有一个 div。两边的间隔，我的目标是让.orange 在悬停.spacer 时滑过.purple，然后当.spacer 不再悬停时再次隐藏。进入悬停时一切正常，但是当鼠标离开时我无法停止.spacer。

到目前为止，这是我的代码。

 $('.purple .spacer').hover(function() {
    zindex = zindex + 1;

    $('.orange').css('left', '100vw');
    $('.orange').css('z-index', zindex);
    $('.orange').animate({'left': '90vw'}, 1000);`

【问题讨论】：

你的标记在哪里？
您能否提供相关的 HTML 或 JSfiddle 以便我们查看这里发生了什么？

标签： jquery html css hover

【解决方案1】：

如果你使用.hover()，你需要里面有两个函数；一种用于mouseenter，另一种用于mouseleave。像这样：

$(".hover").hover(
  function() {
    $(this).css('background-color','red');
  }, function() {
    $(this).css('background-color','green');
  }
);

.hover {
  padding: 5px;
  border: 1px solid black;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="hover">Hover</div>

如果你不这样做，即使在mouseleave 之后它也会保持红色，就像这样：

$(".hover").hover(
  function() {
    $(this).css('background-color','red');
  }
);

.hover {
  padding: 5px;
  border: 1px solid black;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="hover">Hover</div>

【讨论】：