触发取消悬停?

Posted

技术标签:

【中文标题】触发取消悬停?【英文标题】:Trigger an un-hover? 【发布时间】:2021-10-30 07:52:05 【问题描述】:

在下面的脚本中,第一个 div 显示,第二个隐藏。但是在第一个 div 悬停时,它被隐藏,第二个 div 显示。将第二个 div 悬停不会再次显示第一个 div - 我相信因为它是隐藏的,因此悬停功能所涵盖的“mouseout”功能不适用于隐藏的 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>

【问题讨论】:

【参考方案1】:

Hover 有 2 个函数。第一个输入处理第二个处理输出

在您的代码示例中使用它:

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

这是一个例子https://jsfiddle.net/L8h1gawy/

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

【讨论】:

以上是关于触发取消悬停?的主要内容,如果未能解决你的问题,请参考以下文章

如何修复 CSS“过渡”取消悬停元素?

取消悬停时的 CSS3 动画

如何制作“取消悬停”动画? [复制]

在离子按钮上设置颜色取消悬停

使用 jQuery 取消 CSS 悬停行为

当元素被覆盖时取消 mouseout 事件