jQuery mouseover显示隐藏的div并显示div，如果只有鼠标仍然在div上
我的鼠标hover和鼠标输出function有问题。 当我鼠标hover一个链接时，它显示一个隐藏的
，当我鼠标输出div时，它隐藏了div。 问题是，如果我将鼠标hover在链接上，那么我将鼠标移动到不在div上方的其他地方，div不会消失。
如果我使用链接的mouseout事件来设置div的可见性，那么我将无法将鼠标hover在div上。
这是我的HTML：
Untitled Document $(document).ready(function() { $("#show_div").mouseover(function() { $("#hello").css('visibility', 'visible'); }); $("#hello").mouseover(function() { $("#hello").css('visibility', 'visible'); }); $("#hello").mouseout(function() { $("#hello").css('visibility', 'hidden'); }); });
Link text - Coffee
- Tea
- Milk
我使用setTimeout函数来更改css属性。 将setTimeout的时间间隔设置为~333-500毫秒，并将Div的鼠标hover设置为清除超时。 然后，在div本身的mouseout上，再次设置计时器:)
示例/回答：
// timer for hiding the div var hideTimer; // show the DIV on mouse over $("#show_div").mouseover(function() { // forget any hiding events in timer clearTimeout( hideTimer ); $("#hello").css('visibility', 'visible'); }); $("#hello").mouseover(function() { clearTimeout( hideTimer ); $("#hello").css('visibility', 'visible'); }); // set a timer to hide the DIV $("#show_div").mouseout(function() { hideTimer = setTimeout( hideHello, 333 ); }); $("#hello").mouseout(function() { hideTimer = setTimeout( hideHello, 333 ); }); // hides the DIV function hideHello() { $("#hello").css('visibility', 'hidden'); }
将整个事物放在一个容器中，并将鼠标事件放在：
尝试一下： http ： //jsfiddle.net/hGTPp/
HTML
Link text - Coffee
- Tea
- Milk
jQuery的
$("#container").mouseover(function() { $("#hello").css('visibility', 'visible'); }); $("#container").mouseout(function() { $("#hello").css('visibility', 'hidden'); });
Untitled Document
CSS解决方案：
Link text - Coffee
- Tea
- Milk
$(document).ready(function() { var timer; $("#show_div").hover( function () { $('#hello').show(); }, function() { timer = setTimeout(function(){$('#hello').hide();}, 5000); } ); $("#hello").hover( function () { clearTimeout(timer); }, function() { $('#hello').show(); } ); }