JQuery UI图标. .ui-state-hover .ui-icon被浏览器忽略

我已经在一个页面上构建了两个控制容器,一个是使用 jquery-ui选项卡,另一个是通过添加一个使用ui-widget-header类的标题div来设计的样式的样式的标签控件.

在标题div中,我有几个图标.我试图向这些图标添加一个悬停状态,以便在鼠标悬停时,按钮上的颜色反转(通过jquery-ui主题完成),并向图标添加“效果”,让它们知道其可点击.

问题是,浏览器完全忽略了.ui-state-hover .ui-icon选择器和图标的样式.

我使用css中的样式被其他css样式覆盖,但在这种情况下,选择器被完全忽略.

附加到两个图标是一个悬停()事件,将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覆盖的问题.

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