Как изменить JQuery кнопку навести курсор на цвет текста

Question

Я использую следующие CSS, чтобы иметь другой цвет при наведении курсора. ".ui-button-text" работает нормально и показывает правильный цвет, когда появляется модал, но не работает наведение на кнопку.

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

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

Script

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

Вы можете использовать селектор CSS :hover, изменив свой CSS на:

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

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

Answer 2

Ваш CSS слишком двусмысленный и отсутствует цель.

Использование:

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

Fiddle: http://jsfiddle.net/Twisty/zfqs6wac/

Класс ui-state-hover применяется кродитель .ui-button-text.

Answer 3

Вы можете просто добавить :hover вместо .ui-state-hover.

Вот скрипка .