How to Style h:outputLink as per PrimeFaces theme

[bercolax]

I am using the below code for <h:outputLink and I get the correct look and feel (similar to a p:commandButton). How ever I miss the nice hover effect available for PrimeFaces components.

Code: Select all

                   <h:outputLink styleClass="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"   value="/faces/user/report.xhtml">
                        <h:outputText styleClass="ui-button-text" value="Go To Report Generation Page"/>
                    </h:outputLink>

But how to get that hover effect? (I notice ui-state-hover class is appended. Is there any easy way to do add the hover effect ?)

[bercolax]

Just got it to work using

Code: Select all

<h:outputLink onmouseover="$(this).addClass('ui-state-hover')" onmouseout="$(this).removeClass('ui-state-hover')"  .......

Please comment if there is a better way to do it.

[cagatay.civici]

I'd use unobstrusive javascript;

Code: Select all

$('a').mouseover(function() {
  $(this).addClass('ui-state-hover');
}).mouseout(function() {
  $(this).removeClass('ui-state-hover');
});

For example, above enhances all links on page.

[bercolax]

Thanks for the suggestion. Will follow the approach suggested.