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 ：

I want the effect like the jquery official ui dialog demo

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.