I need to stop a DIV disappearing when I mouse over the link in the DIV
Here is my complete code. When I mouse over on popupcontact div it show the divtoshow div over it, and it has one link of name rahul, and when I mouse over the link, it hide the div name divtoshow.
My div should hide when I mouseout not when I mouseover the link.
<!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 so开发者_StackOverflow中文版lid 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>
Instead of .mouseout() like this:
$("#divtoshow").mouseout(function() {
Use .mouseleave(), like this:
$("#divtoshow").mouseleave(function() {
This won't fire when entering a child element like mouseout will, which is currently hiding when you don't want it to.
One other code tip, you can at least chain on the #divtoshow selector, or even better chain and pass an object to .css(), like this:
$("#divtoshow").css({ position: "absolute",
top: popup_pos.top-20,
left: popup_pos.left-20 })
.fadeIn(300);
Also, it's not an issue for your markup, but if #popupContact had a child element you'd have similar issues with mouseover, that not-firing-on-children equivalent is mouseenter.
when using setTimeout and clearTimeout, always make sure to use the full path to these functions by calling window.setTimeout and window.clearTimeout.
I have found that sometimes it won't work properly in some versions of IE if you don't.
加载中,请稍侯......
精彩评论