The issue with the “ui-state-hover” effect

Question

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 (yes,the theme is different)……

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

Answer 1

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.