Al activar el ícono de botón de la IU de jQuery - roto en IE y Chrome

Question

He creado un botón de jQuery UI y me gustaría agregar un ícono secundario 'X' en el evento mouseenter y eliminar la 'X' en el evento mouseleave. Suena fácil.

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

El evento de desplazamiento se dispara varias veces si mueve el cursor del mouse dentro del botón.

Funciona en Firefox, pero falló con IE y Chrome.

Es difícil explicar el efecto peculiar en palabras pero por favor ver el jsFiddle aquí:

http://jsfiddle.net/27SSr/

Mi objetivo es lograr un efecto consistente en todos los navegadores. Gracias =)

EDITAR ***

Ahora tengo alguna pista de por qué el vuelo estacionario se rompe en el IE y Chrome. Al pasar el botón de interfaz de usuario de un par de veces e inspeccionar el elemento de botón en Firebug, resulta las etiquetas HTML están viciados por widget de jQuery UI ..

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

Nota los tramos adicionales y la etiqueta de cierre botón ahora? ¿Este comportamiento es un error de jQuery UI?

Puede probar el ejemplo aquí:

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

Answer 1

bien, después de tocar el violín por un tiempo, por último, una solución que funciona en .. al menos eso me parece decente.

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

Y añadir una línea a CSS:

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

Vea aquí un ejemplo de trabajo: http://jsfiddle.net/GCme2/4/

Answer 2

cómo sobre el uso de mouseenter y mouseleave eventos, sólo se disparará una vez cada uno.

el truco consistía en encapsular el botón en un elemento contenedor y adjuntar los eventos del mouse al contenedor. aquí está the working jsfiddle

y el código:

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

Answer 3

Por qué el uso de JavaScript? ¿Es un requisito? ¿Puedes usar css: hover psuedoclass?

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

Si tiene que usar jQuery, entonces yo diría que tiene que hacer e.stop() después de cada

...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(); 

});