如何在文本颜色上更改 JQuery 按钮 hover

Question

我正在使用以下 css 在 hover 结束时具有不同的颜色。 “.ui-button-text”工作正常，并在模式出现时显示正确的颜色，但按钮 hover over 不起作用。

.ui-button-text {
    color: #7a7d7e;
}

.ui-button-text ui-state-hover {
    color: black;
}

脚本

$("#dialog-confirm").dialog({
            resizable: false,
            height: "auto",
            width: "auto",
            modal: true,
            title: 'Cancelling Back Order Item',
            buttons: {
                "Ok": function () {
                    $(this).dialog("close");
                    return true;
                },
                Cancel: function () {
                    $(this).dialog("close");
                    return false;
                }
            }
        });

这是jsfiddle；

http://jsfiddle.net/7yukbsfe/1/

Answer 1

您可以通过将:hover更改为：

.ui-button-text {
    color: #7a7d7e;
}

.ui-button-text:hover {
    color: black;
}

Answer 2

您可以添加:hover而不是.ui-state-hover 。

这是小提琴。

Answer 3

您的 CSS 太模棱两可，缺少目标。

利用：

.ui-dialog button.ui-button.ui-state-hover .ui-button-text {
  color: black;
}

小提琴： http://jsfiddle.net/Twisty/zfqs6wac/

ui-state-hover class 应用于.ui-button-text的父级。