使用 Jquery 作为下拉菜单的实际示例!将鼠标悬停在#IconLoggedinUxExternal 上显示 div#ExternalMenuLogin 并设置超时以隐藏 div#ExternalMenuLogin
将鼠标悬停在 div#ExternalMenuLogin 上时,它会取消超时。在 div#ExternalMenuLogin 鼠标移出时,它会设置超时。
这里的重点始终是在设置超时之前调用 clearTimeout,这样可以避免重复调用
var ExternalMenuLoginTO;
$('#IconLoggedinUxExternal').on('mouseover mouseenter', function () {
clearTimeout( ExternalMenuLoginTO )
$("#ExternalMenuLogin").show()
});
$('#IconLoggedinUxExternal').on('mouseleave mouseout', function () {
clearTimeout( ExternalMenuLoginTO )
ExternalMenuLoginTO = setTimeout(
function () {
$("#ExternalMenuLogin").hide()
}
,1000
);
$("#ExternalMenuLogin").show()
});
$('#ExternalMenuLogin').on('mouseover mouseenter', function () {
clearTimeout( ExternalMenuLoginTO )
});
$('#ExternalMenuLogin').on('mouseleave mouseout', function () {
clearTimeout( ExternalMenuLoginTO )
ExternalMenuLoginTO = setTimeout(
function () {
$("#ExternalMenuLogin").hide()
}
,500
);
});