如何在primefaces中的鼠標懸停上更改commandlink圖像？

Question

我試過這個，但是我的commandlink消失了。當我試圖找到螢火蟲，它在那裏，但大小爲0 x 0像素。

.myNewButton { 
width: 50px !important; 
height: 50px !important; 
background-image: url('/resources/img/e_menu_icons/x.png') !important ; 
} 

.myNewButton:hover { 
width: 50px !important; 
height: 50px !important; 
background-image: url('/resources/img/e_menu_icons/e.png') !important ; 
} 


<p:commandLink styleClass="myNewButton" value="" 
       oncomplete="myDialog.show(); return false;" 
action="#{myBean.actionMyAction()}"> 
</p:commandLink> 

Answer 1

我試圖複製錯誤，並且顯示該鏈接的方式（顯示：塊;）發了很大的差異：

<style> 
    .myNewButton { 
     display: block; 
     width: 84px !important; 
     height: 84px !important; 
     background-image: url('#{request.contextPath}/resources/img/x.png') !important; 
    } 
    .myNewButton:hover { 
     display: block; 
     width: 84px !important; 
     height: 84px !important; 
     background-image: url('#{request.contextPath}/resources/img/e.png') !important; 
    } 
</style> 

<h:form> 
    <p:commandLink styleClass="myNewButton" 
        oncomplete="myDialog.show(); return false;" /> 
</h:form>