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');
}); 

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');
}); 

• javascript
• jquery
• if-statement
• hover

• 3 why hover even in moueout ??? (it doesn't makes sense-imo) – NullPoiиteя Commented Dec 22, 2012 at 10:22
• updated question, pls have a look – user782104 Commented Dec 22, 2012 at 10:29

2 Answers 2

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.