Hover over jQuery UI icon - broken on IE and Chrome

Question

I created a jQuery user interface button and would like to add a secondary “X” icon to the mouseenter event and remove the “X” from the mouseleave event. That 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 freeze event is fired several times if you move the mouse cursor inside the button.

However, it works in Firefox, however it failed with IE and Chrome.

It's hard to explain the fancy effect in words, but see jsFiddle here:

http://jsfiddle.net/27SSr/

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

EDIT ***

Now I have some tips on why hover over IE and Chrome. Hovering the user interface button several times and checking the button element in Firebug, it turns out that the html tags are corrupted by jQuery UI widgets ..

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

Pay attention to additional SPAN and BUTTON closing tag? Is this behavior a jQuery UI bug?

Here you can try an example:

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

Answer 1

Well, after a long game, 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 the CSS:

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

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

Answer 2

Why use javascript? Is this 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 should use jquery, I would say that you need to execute 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 , they will fire only once.

the trick was to encapsulate the button in the contained element and attach mouse events to the container. here is the working jsfiddle

and 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"); });