2013-03-04 101 views
2

我有一个html <button>并按照基金会<p:commandButton>对其进行了设计。但我没有得到悬停和积极的影响。我曾尝试使用javascript onmouse添加效果,但仍无法获得它。如何将primefaces按钮悬停效果添加到html按钮

<button type="submit" id="submit" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onmouseover="$(this).addClass('ui-state-hover')" onmouseout="$(this).removeClass('ui-state-hover')" onmousedown="$(this).addClass('ui-state-active')"> 
     <h:outputText styleClass="ui-button-text" value="Login" /> 
</button> 

我该如何做到这一点?

+0

试图通过jQuery/JavaScript或CSS只是要添加这个功能吗?你的jquery/javascript代码在哪里? – Swarne27 2013-03-05 05:23:47

+0

我正在使用Primefaces组件库,它有自己的内置css和j-query库。这些功能已经内置在库中,所以当我使用时,我可以获得完整的效果。但是,我需要在HTML按钮上使用这些样式。我无法理解 – fareed 2013-03-05 05:39:35

+0

适合我。 – BalusC 2013-03-13 19:03:13

回答

1

添加onmouseup后,它对我的​​项目有效;

<input jsfc="h:commandButton" 
    class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only yourCSSClass" 
    onmouseover="$(this).addClass('ui-state-hover')" 
    onmouseout="$(this).removeClass('ui-state-hover')" 
    onmousedown="$(this).addClass('ui-state-active')" 
    onmouseup="$(this).removeClass('ui-state-active')" 
    value="New Button" onclick="alert('Hello World!');"> 
    <f:ajax execute="@form" render="@none" /> 
</input>