如何将primefaces按钮悬停效果添加到html按钮答案

【问题标题】：How to add primefaces button hover effect to an html button如何将primefaces按钮悬停效果添加到html按钮
【发布时间】：2013-03-04 13:15:50
【问题描述】：

我有一个 html <button> 并按照 primefaces <p:commandButton> 对其进行样式设置。但我没有得到悬停和主动效果。我已经尝试使用 javascript onmouse over 添加效果，但仍然无法获得它。

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

我怎样才能做到这一点？

【问题讨论】：

正在尝试通过 jquery/javascript 或仅通过 css 添加此功能？你的 jquery/javascript 代码在哪里？
我正在使用 Primefaces 组件库，它有自己的内置 css 和 j-query 库。这些功能已经内置在库中，所以当我使用时，我可以获得完整的效果。但是，我需要在 HTML 按钮上使用这些样式。我做错了

标签： jquery css jsf primefaces

【解决方案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>

【讨论】：