“ui-state-hover”效应的问题

Question

我有一个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对话框演示（是的，主题不同）......

那我怎么解决这个问题呢？做出正确的悬停效果

Answer 1

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

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

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

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

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

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

这是等效的。