我已经在一个页面上构建了两个控制容器,一个是使用
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覆盖的问题.
