What I would like to achieve is when the mouse is not hovered menu3, the system will keep checking whether the aboutMenu is hovered, if yes, alert 'h', and alert 'nh' otherwises. The problem is it only check one time when the mouse leave menu3, how to fix this problem? thanks.
$('#menu3').live('mouseout',function() {
$("#aboutMenu").hover(function() {
$(this).data("hovered", true);
}, function() {
$(this).data("hovered", false);
});
if ( $("#aboutMenu").data("hovered") ) {
alert ('h');
} else {
alert ('nh');
}
});
Updated:
Or the other way to do this is the system is keep checking whether menu3 or aboutMenu is hovered, if not , the hovered message is popup. However, this will only run one-time when the page is initialized , how to make it keep checking? thanks
$(document).ready(function() {
$("#aboutMenu,#menu3").hover(function() {
$(this).data("hovered", true);
}, function() {
$(this).data("hovered", false);
});
if ( $("#aboutMenu,#menu3").data("hovered") )
alert ('hovered');
});
function checkHover() {
if ($("#aboutMenu,#menu3").hasClass("hovered")) {
alert ('hovered');
//other stuff if hovered
}
else {
//other stuff if not hovered
}
}
$(document).ready(function() {
$("#aboutMenu,#menu3").hover(function() {
$(this).addClass("hovered");
}, function() {
$(this).removeClass("hovered");
});
setInterval(checkHover, 1000);
});
Would it be an idea to check the hoverstate periodically?
function chkhover(){
if ($('#aboutMenu').is(':hover')){
alert('#aboutMenu hoverstate is: hovered');
}
setTimeout(chkhover, 500);
}
$(document).ready(chkhover);
See this jsfiddle. It demonstrates a css-only solution too, by the way.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With