CSS "figure it out" challenge

Merri · Jun 23rd, 2006, 10:16 PM

I got an idea a few hours ago and to my surprise it worked. So now I'm presenting you a "weird" way to use :hover - but I'm not explaning how or why it works. This ought to be a nice brain hurting session for all the CSS experts that may be around.

Works perfectly with Firefox 1.5, Opera 9 almost gets it right. IE6 displays nothing, Opera 8 is lost, haven't tested Linux and/or Mac browsers. As far as I know it doesn't abuse browser CSS support so any browser with a good rendering engine should get it right.

Besides the HTML file below you need a PNG image, preferably with some transparency, of size 48 x 48 pixels.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<title>Fake :hover position</title>
		<style type="text/css">
* { border : 0; margin : 0; padding : 0; }
body { text-align : center; }
div {
	height : 432px;
	overflow : hidden;
	margin : 0 auto;
	text-align : left;
	width : 96px;
}
ul {
	font : 10pt/48px "Arial", sans-serif;
	list-style : none;
	margin-top : 576px;
	width : 48px;
}
li {
	background : white;
	color : black;
	display : block;
	margin-top : -192px;
	height : 144px;
}
li:hover,li:hover + li + li + li + li {
	background : #EEF;
	border-right : 48px solid white;
	width : 48px;
}
li:hover + li,li:hover + li + li + li {
	background : #DDF;
	border-right : 24px solid white;
	width : 72px;
}
li:hover + li + li {
	background : #CCF;
}
li span {
	background : #BBE;
	color : #FFF;
	cursor : pointer;
	display : block;
	left : -5000px;
	padding : 0 5px;
	position : absolute;
}
li:hover span {
	left : auto;
	margin-left : 48px;
	margin-top : -67px;
}
		</style>
	</head>
	<body>
		<h1>Fake :hover position</h1>
		<div>
		<ul>
			<li><a href="#1"><img alt="" src="testi.png" /><span>One.</span></a></li>
			<li><a href="#2"><img alt="" src="testi.png" /><span>Two.</span></a></li>
			<li><a href="#3"><img alt="" src="testi.png" /><span>Three.</span></a></li>
			<li><a href="#4"><img alt="" src="testi.png" /><span>Four.</span></a></li>
			<li><a href="#5"><img alt="" src="testi.png" /><span>Five.</span></a></li>
			<li><a href="#6"><img alt="" src="testi.png" /><span>Six.</span></a></li>
			<li><a href="#7"><img alt="" src="testi.png" /><span>Seven.</span></a></li>
			<li><a href="#8"><img alt="" src="testi.png" /><span>Eight.</span></a></li>
			<li><a href="#9"><img alt="" src="testi.png" /><span>Nine.</span></a></li>
			<li><a href="#"></a></li>
			<li><a href="#"></a></li>
		</ul>
		</div>
		<p>Supported only by Firefox 1.5; Opera 9 almost gets it.</p>
	</body>
</html>

Have fun!

Kasracer · Jun 23rd, 2006, 10:22 PM

I thought the anchor tag was the only one that allowed :hover so this may not be valid CSS.

Anyway, can you link to a working demo as I don't have time and can't set it up on my own right now.

CornedBee · Jun 24th, 2006, 04:10 AM

Every element allows :hover, but IE prior to 7 doesn't handle it anywhere else.

Merri · Jun 24th, 2006, 06:45 AM

Hehe, I was all too tired when I made the post so I wasn't up to uploading it. I went right to bed after making the post.

Anyways, here is the page now: http://merri.net/css/fake_hover/

If you're wondering what is so special about it: it has :hover seemingly assigned on a wrong element compared to what elements you can click.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Jun 23rd, 2006, 10:22 PM	#2
Kasracer KrisSiegel.com Join Date: Jul 03 Location: USA, Maryland Posts: 4,973	Re: CSS "figure it out" challenge I thought the anchor tag was the only one that allowed :hover so this may not be valid CSS. Anyway, can you link to a working demo as I don't have time and can't set it up on my own right now. __________________ KrisSiegel.com - My Personal Website with my blog and portfolio Don't Forget to Rate Posts! Free Icons: FamFamFam, VBCorner, VBAccelerator Useful Links: System.Security.SecureString Managed DPAPI Overview Part 1 Managed DPAPI Overview Part 2 MSDN, MSDN2, Comparing the Timer Classes

Jun 24th, 2006, 04:10 AM	#3
CornedBee Kitten Join Date: Aug 01 Location: In a microchip! Posts: 11,594	Re: CSS "figure it out" challenge Every element allows :hover, but IE prior to 7 doesn't handle it anywhere else. __________________ All the buzzt CornedBee "Writing specifications is like writing a novel. Writing code is like writing poetry." - Anonymous, published by Raymond Chen Don't PM me with your problems, I scan most of the forums daily. If you do PM me, I will not answer your question.

Jun 24th, 2006, 06:45 AM	#4
Merri VB6, XHTML & CSS hobbyist Join Date: Oct 02 Location: Finland Posts: 6,440	Re: CSS "figure it out" challenge Hehe, I was all too tired when I made the post so I wasn't up to uploading it. I went right to bed after making the post. Anyways, here is the page now: http://merri.net/css/fake_hover/ If you're wondering what is so special about it: it has :hover seemingly assigned on a wrong element compared to what elements you can click. __________________ Unicode classes, functions... in Visual Basic 6 VB6 in occasional use. I'm mostly HTML, CSS & JavaScript these days. « Antec Sonata II: Core 2 Duo E7400, ASRock P45TS, Asus EN9600GT 512 MB, 4 GB, 1.25 TB » « OS: Windows 7 \| Laptop: Amilo Pi 2530-12P\| Netbook: Asus EEE 901 »

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)