java - 如何在鼠标悬停和鼠标移出时将图像添加到按钮？

Question

我有一个按钮，我想为该按钮添加 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');
    }

Answer 1

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

希望这可以帮助.. ：）

Answer 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');
    }

那是你要的吗 ？