CSS "figure it out" challenge
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! :)
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.
Re: CSS "figure it out" challenge
Every element allows :hover, but IE prior to 7 doesn't handle it anywhere else.
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.
