CSS rollover effects with RichFaces a4j:commandButton
I've not seen a useful, authoritative web resource which says how to reliably enable rollover effects on a4j:commandButton
elements in RichFaces JSF content.
I have f开发者_运维技巧ound plenty of css resources re buttons, but then when they start talking about html I start wondering what the equivalent is in more recent web technologies.
Basically I want my buttons to look different on hover and then on click. I'd like to use images but client side js is out of scope for this q.
m
Use the following attributes as in this example below to your a4j:commandButton
(have a look at the full list (v3.3.1.GA)):
<a4j:commandButton value="Submit" styleClass="ctlBtn"
id="myCtlBtn" type="submit" style="margin-bottom: 5px;"
reRender="allMyOtherplaces"
onmouseover="this.className='ctlBtn btnHover'"
onmousedown="this.className='ctlBtn btnDown'"
onmouseup="this.className='ctlBtn'"
onmouseout="this.className='ctlBtn'"
onclick="this.className='ctlBtn btnDown'"
oncomplete="this.className='ctlBtn'" />
And create classes ctlBtn
, btnHover
and btnDown
in your included .css file.
精彩评论