title: On hover change jQuery UI's button icon - broken on IE and Chrome
body: <p>I've created a jQuery UI button, and would like to add a 'X' secondary icon on mouseenter event, and remove the 'X' on mouseleave event. Sounds easy.</p>
  
  <pre><code>$("#hover").button({
  icons: {
      primary: "ui-icon-tag"
  }
  }).hover(function (event) {
      // hover in           
      $(this).button("option", "icons", { primary: "ui-icon-tag", secondary: "ui-icon-close" });
  }, function (event) {
      // hover out
      $(this).button("option", "icons", { primary: "ui-icon-tag" });
  });
  </code></pre>
  
  <p>The hover event is triggered multiple times if you move the mouse cursor within the button. </p>
  
  <p>It does work in Firefox, however, failed with IE and Chrome.</p>
  
  <p>It's hard to explain the quirky effect in words but please see the jsFiddle here:</p>
  
  <p><a href="http://jsfiddle.net/27SSr/" rel="nofollow">http://jsfiddle.net/27SSr/</a></p>
  
  <p>My goal is to achieve consistent effect across all browsers.
  Thanks =)</p>
  
  <p><strong>EDIT***</strong></p>
  
  <p>Now i have some clue as to why the hover is broken in IE and Chrome.
  Hovering the UI button a few times and inspect the button element in Firebug,
  turns out the html tags are flawed by jQuery UI widget..</p>
  
  <pre><code>&lt;button id="hover" class="ui-button ui-widget ui-state-default ui-corner-all ui-state-hover ui-button-text-icons" role="button"&gt;
  &lt;span class="ui-button-icon-primary ui-icon ui-icon-tag"/&gt;
  &lt;span class="ui-button-text"&gt;Hover me!&lt;/span&gt;
  &lt;span class="ui-button-icon-secondary ui-icon ui-icon-close"/&gt;
  &lt;/button&gt;
  &lt;span class="ui-button-icon-primary ui-icon ui-icon-tag"/&gt;
  &lt;span class="ui-button-text"&gt;Hover me!&lt;/span&gt;
  &lt;span class="ui-button-icon-secondary ui-icon ui-icon-close"/&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>Note the extra SPANs and the BUTTON closing tag now?
  Is this behavior a jQuery UI's bug?</p>
  
  <p>You can try the example here:</p>
  
  <p><a href="http://jsfiddle.net/B5sAk/1/" rel="nofollow">http://jsfiddle.net/B5sAk/1/</a></p>