gpt4 book ai didi

javascript - 当我将鼠标悬停在 DIV 中的链接上时,我需要阻止 DIV 消失

转载 作者:行者123 更新时间:2023-11-28 02:16:55 26 4
gpt4 key购买 nike

这是我的完整代码。当我将鼠标悬停在 popupcontact div 上时,它会在其上显示 divtoshow div,并且它有一个名为 rahul 的链接,当我将鼠标悬停在该链接上时,它会隐藏 div 名称 divtoshow。

我的 div 应该在我鼠标移开时隐藏,而不是在我将鼠标悬停在链接上时隐藏。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="popupContact" style="position:absolute;left:100px;top:100px;width:100px;height:50px;background-color:orange;border:1px solid red ;">
</div>
<div id="divtoshow" style="display:none;background-color:green; border:1px solid black;width:200px;height:100px;position:absolute;">
dsfdssd <div><a href="#">rahul</a></div>
</div>
</body>
</html>
<script type='text/javascript'>
$(document).ready(function(){
var popup_pos=$('#popupContact').offset();
var timer;
$("#popupContact").mouseover(function() {
if(timer) {
clearTimeout(timer);
timer = null
}
timer = setTimeout(function() {
console.log($("#VersionSelectField").is(':hidden'));
if(!$("#VersionSelectField").is(':hidden')){
$("#divtoshow").css('position',"absolute");
$("#divtoshow").css('top',popup_pos.top-20);
$("#divtoshow").css('left',popup_pos.left-20);
$("#divtoshow").fadeIn(300);
$("#popupContact").hide();
}

}, 100);

});

$("#divtoshow").mouseout(function() {
if(timer) {
clearTimeout(timer);
timer = null
}
timer = setTimeout(function() {
$("#divtoshow").fadeOut("slow");
$("#popupContact").show();

}, 1000);
});
});
</script>

最佳答案

而不是 .mouseout()像这样:

$("#divtoshow").mouseout(function() {

使用.mouseleave() ,像这样:

$("#divtoshow").mouseleave(function() {

不会在进入像mouseout这样的子元素时触发,它目前在您不希望它隐藏时会被隐藏。


另一个代码提示,您至少可以链接#divtoshow 选择器,或者更好的链接并将对象传递给.css()。 ,像这样:

$("#divtoshow").css({ position: "absolute", 
top: popup_pos.top-20,
left: popup_pos.left-20 })
.fadeIn(300);

此外,这不是您的标记的问题,但如果 #popupContact 有一个子元素,您会遇到与 mouseover 类似的问题, 相当于不开火的 child 是 mouseenter .

关于javascript - 当我将鼠标悬停在 DIV 中的链接上时,我需要阻止 DIV 消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3600009/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com