Question

我试过环顾四周，找不到与我的问题有任何具体匹配。我使用的是jquery-ui v1.8。

我有一个包含标签的对话框。有两种类型的选项卡（一个是关闭按钮，另一个没有）。我试图为那些带有关闭按钮的人设置背景颜色和图标颜色。）

创建选项卡的jquery如下：

$('#mydivid').tabs({tabTemplate: 
    '<li><nobr><a href="#{href}">#{label}</a>' +
    '<span class="ui-icon ui-icon-close">Remove Tab</span></nobr></li>'});
$('#mydivid').show();

我的.css如下：

.ui-state-hover a, .ui-state-hover a:hover 
{ color:white; background:#fb6648; cursor:pointer; }
.ui-state-default, .ui-widget-content .ui-state-default
{ color:white; background:#5e8f9b; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus 
{ color:white; background:#fb6648; cursor:pointer; }
.ui-state-active, .ui-widget-content .ui-state-active 
{ color:black; background:#e9ebe0; }
.ui-widget-content .ui-icon 
{background-image:url(image/ui-icons_ffffff_256x240.png);}
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon 
{background-image:url(image/ui-icons_ffffff_256x240.png);}
.ui-state-active .ui-icon
{background-image:url(image/ui-icons_222222_256x240.png);}

在没有悬停光标的情况下，所有颜色都会显示出我想要的颜色。如果我将鼠标悬停在非关闭标签上，则会根据需要显示。如果我将鼠标悬停在非活动标签上，则会根据需要显示。

仅在活动标签上，当我悬停时，根据需要更改颜色和背景。但是图标没有变化（正如我所料，但不是我想要的 - 我希望图标变为白色）。如果我将鼠标悬停在图标或其后面的区域上，则该背景不会改变，并且前景颜色会恢复为黑色（可能是因为我不再在其上空盘旋）但背景仍为橙色。

所以我想改变悬停时的图标颜色，让图标的背景像这样改变，当我将光标悬停在关闭按钮上时，颜色会保持白色。

我尝试了很多不同但不成功的程度。请帮忙。我对jquery和CSS很新（你可能会说）。

jquery ui，在悬停时调整图标和背景颜色

0 个答案: