Question

I’ve been having some difficulty with jQuery hover functions. Proberbly as a result of staring at the same code for far too long, but perhaps someone can help.

I have the following function:

    $("#div1").mouseover(function () {
        $("#div2:hidden").show();
    });
    $("#div1").mouseout(function () {
        $("#div2:visible").hide();
    });

Which I have also tried as:

    $("#div1").hover(function () {
        $("#div2:hidden").show();
    }, function() {
        $("#div2:visible").hide();
    });

Neither work AT ALL in IE. Everything I write using ANY mouseover, hover, mouseout or any other “mouse” function causes errors in IE. With other browsers it is perfect and what’s more annoying is it occasionally works in IE, for instance on occasion the first and second time it will work – then it will error.

Any help would be fantastic!

Answer 1

It works just fine here: http://jsfiddle.net/U89de/1/

Your first code is wrong. Better is using:

$('#div1').mouseover(function() {
  // mouseover event
}).mouseout(function() {
  // mouseout event
});

---

If you use jQuery 1.7 or higher it’s better to use .on():

$('#div1').on({
  mouseover : function() {
    // mouseover event
  },
  mouseout : function() {
    // mouseout event
  }
});