title: dojo connect mouseover and mouseout
body: <p>When setting up dojo connections to <code>onmouseover</code> and <code>onmouseout</code>, and then adding content on mouseover, dojo fires the <code>onmouseout</code> event at once, since there is new content. Example:</p>
  
  <pre><code>dojo.query(".star").parent().connect("onmouseover", function() {
      dojo.query("span", this).addContent("&lt;img src='star-hover.jpg'&gt;");
  }).connect("onmouseout", function() {
      dojo.destroy(dojo.query("img", this)[0]);
  });
  </code></pre>
  
  <p>The <code>parent()</code> is a <code>&lt;td&gt;</code>, and the <code>.star</code> 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?</p>
  
  <p><strong>Edit:</strong> Just tried out something similar with jQuery, and it works as expected (at least as I expected it to work.)</p>
  
  <pre><code>$(".star").parent().hover(function() {
      $("span", this).append("&lt;img src='star-hover.jpg'&gt;");
  }, function() {
      $("img", this).remove();
  });
  </code></pre>
  
  <p>This will show the image when hovering, and remove only when moving the cursor outside the table cell.</p>