how can I change commandlink image on mouseover in primefaces?

Question

I tried this but my commandlink disappeared. When i tried to find with firebug, it was there but with size 0 x 0 px.

.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

I've tried to replicate the error and the way the link is displayed (display: block;) made a lot of difference:

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