Jquery help me analyze what happened: mouseover/mouseout ok but not hover/unhover
<p>I've been working on some code where I trigger the code on <code>hover/unhover</code>. Then I decided to trigger the same code also on <code>focus/blur</code>. Usually with <code>hover/unhover</code> only, I go for the usual <code>hover comma no unhover</code> format. But this time since I was trying to add <code>focus/blur</code>, I had to use bind and use <code>this.bind</code> with the second part too, like this:</p>

<pre><code>$.fn.gogogo = function (msg) {
    $(this).bind("hover focus", function(){ 
     $("#screen").html(msg).show();
    });
    $(this).bind("unhover blur", function(){ 
     $("#screen").html("").hide();
    });
}
</code></pre>

<p>The problem was that no matter what I did, <code>hover/unhover</code> didn't take. I had to revert back to <code>mouseover/mouseout</code> like this. The code is identical except for the words <code>hover/unhover</code> vs. <code>mouseover/mouseout</code></p>

<pre><code>$.fn.gogogo = function (msg) {
    $(this).bind("mouseover focus", function(){ 
     $("#screen").html(msg).show();
    });
    $(this).bind("mouseout blur", function(){ 
     $("#screen").html("").hide();
    });
}
</code></pre>

<p>I thought hover/unhover was just the jquery abstraction of mouseover/mouseout. How come the behavior is different here: <code>hover/unhover</code> breaks my code, while <code>mouseover/mouseout</code> is ok? </p>

<p>thanks.</p>
