JQuery UI иконки..ui-state-hover .ui-icon игнорируется браузерами

Question

Я построил два контейнера элемента управления на странице, один из которых использует вкладки jquery-ui, а другой - контейнер div, стилизованный под элемент управления tab с помощью добавления заголовочного элемента div, использующего класс ui-widget-header.

В заголовке div у меня есть несколько значков. Я пытаюсь добавить состояние наведения к этим значкам, чтобы при наведении на них цвета инвертировались (выполняется посредством тем jquery-ui) на кнопках и добавляли «эффект» к значкам, чтобы они знали, что они активны.

Проблема в том, что браузер полностью игнорирует селектор .ui-state-hover .ui-icon и стили для значка.

Я привык, что стили из css переопределяются другими стилями css, но в этом случае селектор полностью игнорируется.

К двум значкам прикреплено событие hover () для добавления ui-state-hover в список классов для значка. Активные классы CSS:

.ui-icon .ui-icon-plus .ui-state-hover

Плюс все, что он будет наследовать от своего родителя.

Вот элементы DOM (пожалуйста, игнорируйте мой ужасный стиль)

<div id="TreeControlArea" class="ui-widget-header ui-corner-all">
        <div style="float: left;">
            <table style="border-collapse: collapse; height: 21px;">
                <tr>
                    <td style="height: 18px; width: 18px; margin: auto;">
                        <div id="AddUser" class="ui-icon ui-icon-plus" title="Click to Add a User">
                        </div>
                    </td>
                    <td style="height: 18px; width: 18px; margin: auto;">
                        <div id="DeleteUser" class="ui-icon ui-icon-close" title="Click to Delete a User">
                        </div>
                    </td>
                </tr>
            </table>
        </div>

Jquery-ui css, (я полагаю, что все знают обо всем, что здесь написано в cue css).

.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_e3e3e3_256x240.png); }

Вот снимки экрана снимка инструментов разработчика браузера состояния элемента icon dom.

Заранее спасибо

Редактировать

Оригинальный код наведения мыши

$('.ui-icon').hover(
        function () {
            $(this).addClass('ui-state-hover');
        },
        function () {
            $(this).removeClass('ui-state-hover');
        }
    );

Решение

$('.ui-icon').hover(
        function () {
            $(this).parent().addClass('ui-state-hover');
        },
        function () {
            $(this).parent().removeClass('ui-state-hover');
        }
    );

По-прежнему существует проблема переопределения ui-icon ui-state-hover icon ui-icon ui-widget-header.

Answer 1

На основе off "К двум значкам прикреплено событие hover () для добавления ui-state-hover в список классов для значка" и этот код, который вы дали:

.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_e3e3e3_256x240.png); }

Вам необходимодобавьте ui-state-hover be к родительскому класса ui-icon (не к самому значку).Таким образом, один из ваших многочисленных предков, содержащих элементы (td или tr или table и т. Д.), Поскольку CSS настроен именно так (на основании предоставленной вами информации).

Answer 2

Извините за поздний ответ. Вы всегда можете добавить «: hover» в файл CSS. В файле jquery-ui-custom.css добавьте следующее в разделе «Значки - состояния и изображения» ...

.ui-widget-header .ui-icon {background-image: url(images/ui-icons_7d6a55_256x240.png); }
.ui-state-default .ui-icon { background-image: url(images/ui-icons_b2aa7d_256x240.png); }
.ui-state-default .ui-icon:hover{ cursor:pointer; background-image: url(images/ui-icons_7d6a55_256x240.png); }
.ui-widget-header .ui-icon:hover {cursor:pointer; background-image: url(images/ui-icons_b2aa7d_256x240.png); }

Или просто сделай

.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_b2aa7d_256x240.png); }
.ui-icon:hover {cursor:pointer; background-image: url(images/ui-icons_7d6a55_256x240.png);  }