On hover change jQuery UI's button icon - broken on IE and Chrome

Question

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.

$("#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" });
});

The hover event is triggered multiple times if you move the mouse cursor within the button.

It does work in Firefox, however, failed with IE and Chrome.

It's hard to explain the quirky effect in words but please see the jsFiddle here:

http://jsfiddle.net/27SSr/

My goal is to achieve consistent effect across all browsers. Thanks =)

EDIT***

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..

<button id="hover" class="ui-button ui-widget ui-state-default ui-corner-all ui-state-hover ui-button-text-icons" role="button">
<span class="ui-button-icon-primary ui-icon ui-icon-tag"/>
<span class="ui-button-text">Hover me!</span>
<span class="ui-button-icon-secondary ui-icon ui-icon-close"/>
</button>
<span class="ui-button-icon-primary ui-icon ui-icon-tag"/>
<span class="ui-button-text">Hover me!</span>
<span class="ui-button-icon-secondary ui-icon ui-icon-close"/>
</button>

Note the extra SPANs and the BUTTON closing tag now? Is this behavior a jQuery UI's bug?

You can try the example here:

http://jsfiddle.net/B5sAk/1/

Answer 1

Okay, after fiddling for awhile, finally a workaround that works.. at least that seems decent to me.

$("button").button({
    icons: {
        primary: "ui-icon-tag",
        secondary: "ui-icon-blank"
    }
}).hover(function () {
    // hover in            
    $(".ui-button-icon-secondary", this).toggleClass("ui-icon-close ui-icon-blank");
}, function () {
    // hover out
    $(".ui-button-icon-secondary", this).toggleClass("ui-icon-close ui-icon-blank");
});

And add one line to CSS:

.ui-icon-blank { background-position: -240px -224px; } /* point to blank area of sprite */

See here for a working example: http://jsfiddle.net/GCme2/4/

Answer 2

Why use javascript? Is it a requirement? Can you use css :hover psuedoclass?

.ui-button-text .myicon{background-image: url('/path/reg.jpg')}
.ui-button-text .myicon:hover{background-image: url('/path/to.jpg')}

If you must use jquery, then I would say you need to do e.stop() after each

    ...hover(function (event) {
        // hover in           
        $(this).button("option", "icons", { primary: "ui-icon-tag", secondary: "ui-icon-close" });
        event.stop();
    }, function (event) {
        // hover out
        $(this).button("option", "icons", { primary: "ui-icon-tag" });
    event.stop();

});

Answer 3

how about using mouseenter and mouseleave events, they will only fire once each.

the trick was to encapsulate the button in a containing element, and attach the mouse events to the container. here's the working jsfiddle

and the code:

<span id="hover-container">
  <button id="hover">Hover me!</button>
</span>

$("#hover").button({
    icons: {
        primary: "ui-icon-tag"
    }
});

$("#hover-container").mouseenter(function() {
     $("#hover").button("option", "icons", { primary: "ui-icon-tag", secondary: "ui-icon-close" });
    prependMessage("entering #hover");
});

$("#hover-container").mouseleave(function() {
      $("#hover").button("option", "icons", { primary: "ui-icon-tag" });
    prependMessage("leaving #hover");
});