在悬停时更改jQuery UI的按钮图标 - 在IE和Chrome上打破

Question

我已经创建了一个jQuery UI按钮,并希望在mouseenter事件上添加一个"X"辅助图标,并删除mouseleave事件上的"X".听起来很容易.

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

如果在按钮内移动鼠标光标,则会多次触发悬停事件.

它确实可以在Firefox中运行,但是IE和Chrome都失败了.

很难用文字来解释古怪的效果,但请在这里看到jsFiddle:

http://jsfiddle.net/27SSr/

我的目标是在所有浏览器中实现一致的效果.谢谢=)

编辑***

现在我有一些线索,为什么在IE和Chrome中悬停被打破.将UI按钮悬停几次并检查Firebug中的按钮元素,结果证明html标签有缺陷的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>

现在注意额外的SPAN和BUTTON结束标签？这种行为是jQuery UI的错误吗？

你可以在这里试试这个例子:

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

Answer 1

好吧，经过一段时间的摆弄，终于找到了一个可行的解决方法……至少对我来说这似乎不错。

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

并在 CSS 中添加一行：

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

请参阅此处的工作示例： http: //jsfiddle.net/GCme2/4/