jquery - 如何将 primefaces 按钮悬停效果添加到 html 按钮

Question

我有一个 html <button>并根据 primefaces <p:commandButton> 设置样式.但我没有得到悬停和主动效果。我已经尝试使用 javascript onmouse 添加效果，但仍然无法实现。

<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>

我怎样才能做到这一点？

Answer 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>