触发取消悬停？

Question

在下面的脚本中，第一个 div 显示，第二个隐藏。但是在悬停第一个 div 时，它会隐藏，而第二个 div 会显示。将鼠标悬停在第二个 div 上不会再次显示第一个 div - 我相信是因为它是隐藏的，因此悬停功能所涵盖的“鼠标移开”功能将无法在隐藏的 div 上运行.我试过添加单独的 mouseLeave 和 mouseout 事件，但两者都无法正常工作。有什么想法吗？

$(document).ready(function(){
  $("#seconddiv").hide();
  $("#firstdiv").hover(function(){
    $("#seconddiv").show();
    $("#firstdiv").hide();
  });
});

.fullwidth {
width: 100%;
padding-top: 25px;
padding-bottom: 25px:
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="firstdiv" class="fullwidth">
<p>First Text</p>
</div>
<div id="seconddiv" class="fullwidth">
<p>Second Text</p>
</div>
</body>
</html>

Answer 1

Hover 有两个函数。第一个 in 处理第二个处理 out

要在您的代码示例中使用它：

  $("#firstdiv").hover(function(){
    $("#seconddiv").show();
    $("#firstdiv").hide();
  },
  function(){
    $("#seconddiv").hide();
    $("#firstdiv").show();  
  })

举个例子https://jsfiddle.net/L8h1gawy/

在此处查看更多详细信息：https://api.jquery.com/hover/

触发取消悬停？

Trigger an un-hover?

jquery

hover

mouseleave

mouseout