dojo connect mouseover and mouseout

Question

When setting up dojo connections to onmouseover and onmouseout, and then adding content on mouseover, dojo fires the onmouseout event at once, since there is new content. Example:

dojo.query(".star").parent().connect("onmouseover", function() {
    dojo.query("span", this).addContent("<img src='star-hover.jpg'>");
}).connect("onmouseout", function() {
    dojo.destroy(dojo.query("img", this)[0]);
});

The parent() is a <td>, and the .star is a span. I want to add the hover image whenever the user hovers the table cell. It works as long as the cursor doesn't hover the image, because that will result in some serious blinking. Is this deliberate? And is there a way around it?

Edit: Just tried out something similar with jQuery, and it works as expected (at least as I expected it to work.)

$(".star").parent().hover(function() {
    $("span", this).append("<img src='star-hover.jpg'>");
}, function() {
    $("img", this).remove();
});

This will show the image when hovering, and remove only when moving the cursor outside the table cell.

Answer 1

The reason it works with jQuery in your example is because .hover uses the normalized onmouseenter/onmouseleave events. If you were to connect to those, it would work in Dojo as expected. Also, a simulation of .hover for Dojo would be:

dojo.NodeList.prototype.hover = function(over, out){
    return this.onmouseenter(over).onmouseleave(out || over);
}

Then you'd just:

dojo.query("...").hover(function(e){ .. }, function(e){ .. });

The differences between mouseeneter and mouseover are why you are seeing the behavior of an immediate onmouseout firing.