Javascript 悬停时更改jqueryui'；s按钮图标-在IE和Chrome上损坏

我已经创建了一个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中却失败了

很难用语言来解释这种奇怪的效果，但请看这里的JSFIDLE：

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

编辑***

现在我有了一些线索来解释为什么IE和Chrome中的悬停被破坏了。 将UI按钮悬停几次并检查Firebug中的按钮元素， 结果表明，jQueryUI小部件对html标记有缺陷

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

让我停下来！
让我停下来！

现在注意到额外的跨距和按钮闭合标记了吗？ 这种行为是jQueryUI的错误吗

您可以在此处尝试以下示例：

---

使用

mouseenter

和

mouseleave

事件怎么样，它们每次只会触发一次

诀窍是将按钮封装在包含元素中，并将鼠标事件附加到容器中。这是

以及守则：

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

让我停下来！
$（“#悬停”）。按钮({
图标：{
主：“ui图标标签”
}
});
$（“#悬停容器”）.mouseenter（函数（）{
$（“#悬停”）。按钮（“选项”、“图标”{主要：“ui图标标记”，次要：“ui图标关闭”}）；
prependMessage（“输入悬停”）；
});
$（“#悬停容器”）.mouseleave（函数（）{
$（“#悬停”）。按钮（“选项”、“图标”{primary:“ui图标标签”}）；
prependMessage（“离开悬停”）；
});

为什么要使用javascript？这是一项要求吗？你能使用css:hover-psuedoclass吗

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

如果您必须使用jquery，那么我认为您需要在每次查询之后执行e.stop（）

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

});

---

好吧，在摆弄了一段时间后，终于找到了一个有效的解决办法。。至少在我看来这很体面

$("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 */

---

请参见此处的工作示例：

这不起作用。我试过了。事实上，在引擎盖下，hover也使用mouseenter和mouseleave作为事件处理程序，请阅读这里的某个地方。我有一种感觉，这里正在进行比赛。。当你很快地将鼠标悬停在按钮上时，就会出现这种情况，这导致了上面演示的有缺陷的元素。它仍然是一样的，只适用于Firefox，在Chrome和IE上都失败了。。第二个图标（“X”-十字架）在快速悬停几下后不会被移除。。也许你应该再试一次=）我这里不使用CSS伪类，因为那个按钮是一个jQueryUI小部件。它允许使用选项向按钮添加主图标和次图标。此外，没有event.stop（）之类的东西，但是如果你是指event.stopPropagation（），我已经尝试过了，但是对于让我使用toggleClass（）解决方法的CSS伪类的想法，我没有太多的+1。好吧，我无法满足你的项目的jqui需求，但我只是把jqui看作是一个样式表和一些帮助器js，您可以通过良好的css元素定位轻松地扩展它们。