JQuery 用户界面图标。 .ui-state-hover .ui-icon 被浏览器忽略

Question

我在一个页面上构建了两个控件容器，一个使用 jquery-ui 选项卡，另一个是一个 div 容器，通过添加一个使用 ui-widget-header 类的标题 div，样式看起来像选项卡控件。

在标题 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，(我想每个人都知道这里所有的状态提示 css 东西。)

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

下面是浏览器的开发者工具的图标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-state-hover ui-icon 被 ui-widget-header ui-icon 覆盖的问题。

Answer 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 添加到 ui-icon 类的父级(而不是图标本身).所以你的许多祖先包含元素之一(td 或 tr 或 table 等)，因为 css 是这样设置的(基于根据您提供的信息)。