Random :Hover Backgrounds. — OZONE Asylum, home of the Mad Scientists

CSS - DOM - XHTML - XML - XSL - XSLT

Random :Hover Backgrounds.

This page's ID: 30117

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Setting the [i]width[/i] and [i]height[/i] of the A has no effect if you leave them in [i]display:inline;[/i] ( their default display type ). Also, IE6- only support the[i] :hover[/i] pseudo-class on A, therefore [b]li:hover[/b] does not work. What I suggest is to do something like:[code]#navlist li a { display:block; background:url(images/paint/cssSprite.png) no-repeat 0px 1000px; } #navlist li a:hover { height:120px; /* height of the paint splashes / } #navlist li.paint_0 a:hover { background-position:0px 0px; } #navlist li.paint_1 a:hover { background-position:0px -200px; / 1x the width of the links/paint splashes / } #navlist li.paint_2 a:hover { background-position:0px -400px; / 2x the width of the links/paint splashes / } #navlist li.paint_3 a:hover { background-position:0px -600px; / 3x the width of the links/paint splashes */ }[/code]And add a random class ( paint_0 -> paint_N ) on the LI when you generate the markup of the page. The "bad" thing about this suggestion is that the A "grows" when hovered :p For more randomness, the random class can be changed on each mouseover or mouseout using JavaScript. Hope that helps. [url=http://www.p01.org/][img]http://poi.ribbon.free.fr/files/p01_ozoneasylum_sig_teapot.png[/img][/url] [small](Edited by [url=http://www.ozoneasylum.com/user/2185]poi[/url] on 03-16-2008 05:36)[/small] Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu