Значки пользовательского интерфейса JQuery..ui-state-hover.ui-icon игнорируется браузерами

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

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

Проблема заключается в том, что браузер полностью игнорирует селектор и стили .ui-icon.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 cue cus здесь).

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

Ниже приведены скриншоты моментальных снимков разработчика браузера для элемента состояния icon icon.

IE CSS

IE CSS condensed

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

Изменить

Код исходного наведения

$('.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, которая переопределяется ui-widget-header ui-icon.

Ответы

Ответ 1

На основании "Прикреплено к двум значкам - это событие 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 настроен таким образом (на основе предоставленной вами информации).

Ответ 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);  }