JQuery UI图标..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,(我假设每个人都知道这里的所有状态cue 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

基于"附加到两个图标是一个悬停()事件,将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设置了这种方式(根据您所提供的信息).