The issue with the "ui-state-hover" effect

I have a 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>

I want the anchor to have hover effect so I add this javascript:

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

but the anchor's "ui-state-default" or "ui-state-hover" state doesn't work like this ：

开发者_JAVA技巧

I want the effect like the jquery official ui dialog demo

(yes,the theme is different)……

So how can I solve this problem? Make a right hover effect

---

You can do this entirely in CSS using a :hover selector. Ie:

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

Depending on where you want the hover to occur, you could move the hover line. The following would change the link style when the header was hovered (and not only the link):

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

If using jQuery, you can simplify your selector:

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

This is equivalent.