There are plenty of sites about showing how to do hover and click (=active) effects on an element (typically a link or\u00a0image\/image button)\u00a0using Javascript, but with modern browsers (including IE7 and above but not IE6)\u00a0this is completely unnecessary as it can be done entirely with CSS. The advantages are clear – no Javascript is needed, the CSS is straightforward, and no round trip to the server is needed. The typical effects used are to swap images or highlight using a different border or background.<\/p>\n
These effects can now be performed on any element, not just a link, but check out compatibility as IE has had some issues with this. I have performed this on image buttons as well as links and had no trouble.<\/p>\n
The W3schools article on Pseudo Classes is here<\/strong><\/a>. <\/strong>An example of using the hover effect to switch a background\u00a0image via CSS may be found here<\/strong><\/a>. <\/strong>(Note the importance of setting an explicit\u00a0width and height in the CSS – required because\u00a0the\u00a0example uses background images).<\/p>\n The pseudo class can be added to an existing style class. The following simple\u00a0example shows an ICEfaces Image button with a style class, with modified pseudo classes used in the CSS to highlight the border differently on hover and active (active in CSS terms means click).<\/p>\n CSS<\/span><\/strong><\/p>\n <\/strong><\/p>\n JSF<\/span><\/strong><\/p>\n There are plenty of sites about showing how to do hover and click (=active) effects on an element (typically a link or\u00a0image\/image button)\u00a0using Javascript, but with modern browsers (including IE7 and above but not IE6)\u00a0this is completely unnecessary as it can be done entirely with CSS. The advantages are clear – no Javascript is needed, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[79],"tags":[189,78,16,188],"_links":{"self":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/686"}],"collection":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=686"}],"version-history":[{"count":15,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/686\/revisions"}],"predecessor-version":[{"id":689,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/686\/revisions\/689"}],"wp:attachment":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=686"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=686"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=686"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}.ImageButton {\r\n\tmargin: 1px;\r\n\tpadding: 1px;\r\n}\r\n.ImageButton:hover {\r\n\tpadding: 0px;\r\n\tborder: 1px solid #ffa600;\r\n}\r\n.ImageButton:active {\r\n\tpadding: 0px;\r\n\tborder: 1px solid #ffd800;\r\n}<\/pre>\n<ice:commandButton image=\"images\/arrow-up.gif\"\r\n styleClass=\"ImageButton\">\r\n<\/ice:commandButton><\/pre>\n","protected":false},"excerpt":{"rendered":"