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

Posted 2023-05-09

【中文标题】jQuery UI 图标。 .ui-state-hover .ui-icon 被浏览器忽略

【英文标题】：JQuery UI icons. .ui-state-hover .ui-icon being ignored by browsers

【发布时间】：2012-01-13 06:07:49

【问题描述】：

我在一个页面上构建了两个控件容器，一个是使用 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 覆盖的问题。

【问题讨论】：

您能否指定包含 .css 文件的顺序？

没错，这是一个DNN模块，顺序是default.css > skin.css > jqueryui.css > module.css。 CSS 类在 jqueryui.css 中显示的顺序与您从 jquery themeroller 获得的顺序相同。为这些元素提取的唯一 CSS 来自 JQueryui css。

【参考方案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 是以这种方式设置的（基于您提供的信息）。

【讨论】：

改变悬停事件为 $(this).parent().addClass('ui-state-hover');没有让浏览器使用 .ui-state-hover .ui-icon 样式。

这一定意味着问题不仅仅是将ui-state-hover 类添加到错误的元素中。有什么方法可以在 jsfiddle 中重新创建它的微版本？

我评论得太快了。你是对的，我没有看到样式，因为它被 ui-widget-header ui-icon 覆盖。你解决了主要问题。谢谢

太棒了。很高兴它像那样“简单”:-)

是的，现在感觉很愚蠢。我刚刚再次查看了主题滚轮中的 jquery-ui 示例，发现它也是这样做的。

【参考方案2】：

抱歉回复晚了。您可以随时将 ":hover" 添加到 css 文件中。在 jquery-ui-custom.css 文件中，在 Icons - states and images 部分下添加以下内容...

.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);