Question

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

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

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

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

Answer 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>

在jquery麻烦中悬停/关闭

1 个答案: