我有一個按鈕，我想爲該按鈕添加onmouseover和onmouseout效果。我已經爲這兩個的onmouseover和onmouseout效果兩張圖片我已經嘗試了這個如何使用鼠標懸停並將鼠標移出圖像添加到按鈕？

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

你能幫助我嗎？

更新

我已經試過這一點。沒用。仍然沒有得到適當的UI

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

來源

2012-12-19 Teja Maridu

你不喜歡只是改變懸停的外觀？ – Daniel

我將從下一次 –

嘛，...那麼CSS呢？在外部樣式表添加styleClass您p:commandButton和風格將其與CSS這樣的：

的facelet代碼：

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

這是你想要的嗎？

來源

2012-12-19 13:47:12 Fallup

編號沒有得到它 –

@ user1874744嗯，我已經嘗試過它，現在它正在爲我工作。它是否有效，它不是你想要的，或者它根本不適合你？ – Fallup

它根本不工作。我正在使用主要面孔。不知道如何執行主要面孔。 –

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

希望這有助於.. :)

來源

2012-12-19 07:43:32

我不需要圖像，請給我按鈕.. –

如何使用鼠標懸停並將鼠標移出圖像添加到按鈕？

更新

回答

相關問題