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/

Answer 2

为什么要使用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();

});

Answer 3

如何使用mouseenter和mouseleave事件，它们只会触发一次。

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

和代码：

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

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

3 个答案: