css - 如何在 primefaces 中更改鼠标悬停时的命令链接图像？

Question

我尝试了这个，但我的命令链接消失了。当我尝试用 firebug 查找时，它就在那里，但大小为 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

我尝试重现该错误，但链接的显示方式 (display: block;) 产生了很大的差异:

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