“ui-state-hover”效果的问题答案

【问题标题】：The issue with the "ui-state-hover" effect“ui-state-hover”效果的问题
【发布时间】：2010-12-09 06:03:18
【问题描述】：

我有一个 html

  <div class="portlet-header">
         <a href="#" class="ui-icon ui-corner-all ui-state-default">
              <span class="ui-icon ui-icon-minusthick ui-corner-all"></span>
         </a>
   </div>

我希望锚点有悬停效果，所以我添加了这个 javascript：

$(".portlet-header").hover(function()
{
    $(this).find("a")
        .removeClass("ui-state-default")
        .addClass("ui-state-hover");
},function(){……});

但是主播的 "ui-state-default" 或 "ui-state-hover" 状态不能这样工作：

想要jquery官方ui对话框demo(是的，主题不一样)这样的效果……

那么我该如何解决这个问题呢？制作右悬停效果

【问题讨论】：

标签： jquery jquery-ui user-interface hover

【解决方案1】：

您可以使用 :hover 选择器完全在 CSS 中完成此操作。即：

.portlet-header a { ... };
.portlet-header a:hover { /* hover behavior */ }

根据您希望悬停发生的位置，您可以移动悬停线。当标题悬停时，以下内容将更改链接样式（而不仅仅是链接）：

.portlet-header:hover a { ... }

如果使用 jQuery，你可以简化你的选择器：

$(".portlet-header a").hover();

这是等价的。

【讨论】：