我的鼠标悬停和鼠标输出功能有问题.当我鼠标悬停链接时,它会显示一个隐藏的< div>,当我鼠标移出div时,它会隐藏div.问题是,如果我将鼠标悬停在链接上,那么我将鼠标移动到不在div上方的其他地方,div将不会消失.
如果我使用链接的mouSEOut事件来设置div的可见性,那么我将无法将鼠标悬停在div上.
这是我的HTML：
Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
SEOver(function() {
$("#hello").css('visibility','visible');
});
$("#hello").mouSEOver(function() {
$("#hello").css('visibility','visible');
});
$("#hello").mouSEOut(function() {
$("#hello").css('visibility','hidden');
});
});
最佳答案
我使用setTimeout函数来更改css属性.将setTimeout的时间间隔设置为~333-500毫秒,并将Div的鼠标悬停设置为清除超时.然后,在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');
}
