Я создал два контейнера управления на странице, один использует вкладки 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.
Заранее спасибо
Изменить
Код исходного наведения
$('.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.