Rollover Div — OZONE Asylum, home of the Mad Scientists

CSS - DOM - XHTML - XML - XSL - XSLT

This page's ID: 27301

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	it took me a bit, but examples are so nice... here is a proper scriptless one (though I don't know if the suckerfish would actually have used JS for this, only skimmed the page): [code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Rollover List Demo</title> <style type="text/css"> body { background: #333; color: #111; font-family: sans-serif; font-size: 12px; margin: 0; padding: 60px 180px; } ul { margin: 0; padding: 0; } ul li { list-style: none; border: 1px solid #111; margin: 0; padding: 0; } ul li a, ul li a:visited { display: block; background: #111; color: #bbb; padding: 6px 18px; } ul li a:hover, ul li a:active { background: #222; padding: 6px 18px; } </style> </head> <body> <h1>Rollover List Demo</h1> <ul> <li><a href="#">Intel Core Duo</a></li> <li><a href="#">Front Row</a></li> <li><a href="#">Built-in iSight camera</a></li> <li><a href="#">iLife `06 featuring iWeb</a></li> </ul> <p>(Works best across browsers if the elements you apply the 'hover' pseudo-class to are anchors, so this is what I'm doing here.)</p> </body> </html>[/code] http://kussatz.com/asylum/rollover_list.html [small](Edited by [url=http://www.ozoneasylum.com/user/1695]kuckus[/url] on 01-11-2006 00:07)[/small] Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu