触发取消悬停?



在下面的脚本中,显示第一个div,隐藏第二个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>

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

在代码示例中使用它:

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

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

查看更多详细信息请访问:https://api.jquery.com/hover/

最新更新