如何在primefaces中更改mouseover上的commandlink图像?

时间:2014-01-30 19:42:13

标签: css primefaces hover commandlink

我尝试了这个,但我的命令链接消失了。当我试图找到萤火虫时,它就在那里,但尺寸为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>

1 个答案:

答案 0 :(得分:3)

我试图复制错误以及链接的显示方式( 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>