【问题标题】：How to add images to button with mouse over and mouse out?如何在鼠标悬停和鼠标移出时将图像添加到按钮？
【发布时间】：2023-03-13 02:05:01
【问题描述】：

我有一个按钮，我想为该按钮添加 onmouseover 和 onmouseout 效果。我有两个用于 onmouseover 和 onmouseout 效果的图像这个我试过了

<p:commandButton onmouseover="../images/add_on_18.png" 
                 onmouseout="../images/add_off_18.png" 
                 value="New" />

你能帮帮我吗？

更新日期

我已经试过了。没用。仍然没有得到正确的用户界面

XHtml 代码：

 <p:commandButton value="New" 
                  styleClass = "btnBckg" 
                  actionListener="#{routeController.createNewRoute}" 
                  update=":routeHeaderForm"/>

CSS 代码：

 .btnBckg {
        background-image: url('../images/add_off_18.png');
    }

    .btnBckg:hover {
        background-image: url('../images/add_on_18.png');
    }

【问题讨论】：

你不想改变它在悬停时的外观吗？

标签： java html css user-interface primefaces

【解决方案1】：

<img src="../images/image1.png" 
     onmouseover="this.src='../images/image2.png'" 
     onmouseout="this.src='../images/image1.png'" />

希望这会有所帮助.. :)

【讨论】：

【解决方案2】：

嗯，... CSS 呢？将 styleClass 添加到您的 p:commandButton 并在外部样式表中使用 CSS 设置样式，如下所示：

面码：

  <p:commandButton value="New"
                     styleClass = "btnBckg" 
                     actionListener="#{routeController.createNewRoute}" 
                     update=":routeHeaderForm"/>

CSS 代码：

    .btnBckg {
        background-image: url('../resources/images/image1.png');
    }

    .btnBckg:hover {
        background-image: url('../resources/images/image2.png');
    }

这是你想要的吗？

【讨论】：

@user1874744 好吧，我刚刚尝试过，它对我有用。它是否有效，不是您想要的，或者根本不适合您？
它根本不工作。我正在使用素数面孔。不知道如何针对主要面孔实施。
好的，您是否已将创建的 CSS 文件 导入到您的 .xhtml 中？如果您这样做了，请尝试将background-image:... 替换为.btnBckg 中的background: red 和.btnBckg:hover 中的background: blue。如果它正常工作（切换颜色），那么您的图像路径未正确指定。