无法为jqueryUI的对话框关闭按钮设置活动状态样式

Question

我希望能够样式化jqueryUI对话框标题栏中关闭按钮的激活状态。我已经成功地为其普通状态和:hover状态进行了样式设置，但是:active状态似乎从未被触发。插件中是否有什么东西防止了关闭按钮链接中的:active状态工作？是否可以更改以使其正常工作？以下是问题示例：查看示例。

- C.J.

---

你能给我们一些你所做过的有效和无效的样例吗？ - xaxxon

在我的Mac Chrome最新版上可以工作。我点击（并按住）它，它就会变黑，就像页面上的CSS所说的那样。 - xaxxon

真的吗？我正在运行FF7和IE9，但它们都无法运行。 - C.J.

也适用于Safari浏览器。版本5.1（7534.48.3）- Chrome版本为14.0.835.202。 - xaxxon

好的。那很有趣，WebKit就是那样工作的。但我使用的浏览器却不是这样的 :) - C.J.

是的，在Mac Firefox 7.0.1中不起作用。 - xaxxon

Answer 1

在不支持“selectstart”事件的浏览器中禁用对话框小部件标题栏选择的结果是禁用了“mousedown”事件。

第145行：jquery.ui.dialog.js

        uiDialogTitlebar.find( "*" ).add( uiDialogTitlebar ).disableSelection();

第120行：jquery.ui.core.js

    disableSelection: function() {
    return this.bind( ( $.support.selectstart ? "selectstart" : "mousedown" ) +
        ".ui-disableSelection", function( event ) {
            event.preventDefault();
        });
},

enableSelection: function() {
    return this.unbind( ".ui-disableSelection" );
}

所以你可以使用enableSelection()或自行解除绑定

- Bizniztime

Answer 2

鉴于@Bizniztime的评论，为什么不用JavaScript来实现呢？

$(".ui-dialog-titlebar-close").mousedown(function() {
    $(this).css("background", "#000");
}).mouseover(function() {
    $(this).css("background", "#0F0");    
}).mouseout(function() {
    $(this).css("background", "#F00");    
});

您还可以添加/删除类...

- ScottE

Answer 3

:active状态只有在被点击时才会触发。在那一点上，您的对话框将立即关闭，因此我怀疑您能否看到它的状态。如果这个回答没有解决您的问题，您可以提供一个例子吗？

- JNDPNT

---

“close”函数直到鼠标按钮释放后才被调用。 - bricker

:hover 在 :after 之前吗？在 css 中，:after 必须在 :hover 之后。 - JNDPNT

问题不在CSS上，而是对话框代码中绑定的某些事件。如果您解除对话框标题栏中的所有事件绑定，则活动状态将正常工作。我只是不知道具体哪个事件是问题所在。 - C.J.