As all CSS users should know, the :hover pseudo state is sweet, but has its limitations. :hover pretty much works on all elements, and in the future, it should work on all elements in all browsers. However, right now, we still have to deal with Internet Explorer 6 and the fact that :hover only works on links.
Typically, I have to beat IE into submission, and that was still the case with my most recent redesign, version 3. Okay, lets set up a scenario where we will need to use more than the link for a hover action. Lets say we are using the ohh so popular rounded box technique, but we don’t want the box to have a static height. Basically, heres what we want: A normal link with a bunch of content in the box. The box will be a fixed width, but a variable height. When the user hovers over the link, we want a rounded box to show.
So lets start off. Here is our link with a bunch of text in it:
And here is the code for the link (very basic):
<a class="big-link" href="..." title="...">
...
</a>
Pretty simple so far. Lets add some CSS:
CSS:
a.big-link{
display:block;
width:160px;
padding:5px;
border:none;
}
Lets see what that CSS has done for us:
When an evil darkness enshrouds the land of Hyrule, a young farm boy named Link must awaken the hero – and the animal – within. When Link travels to the Twilight Realm, he transforms into a wolf and must scour the land with the help of a mysterious girl named Midna.
Alright, so now lets add the CSS to make the rounded corners appear when we hover. I am using a very special image. It happens to be just the white rounded corners, but it is a transparent gif. That way, any background color will shine through.
a.big-link{
display:block;
width:160px;
padding:5px;
border:none;
}
a.big-link:hover{
background: #eeeeee url(/style/images/nav_list_alt_top.gif) left top no-repeat;
}
Check it out and try to hover the text below:
Great! However, we only have half of the effect that we need. We need to have another image for the bottom and we need that to change out on hover as well. The trick is to put another tag within the link. This way the :hover pseudo state can be used to affect that tag:
Here is the modified XHTML:
<a class="big-link" href="..." title="...">
</span>
...
</span>
</a>
Here is the modified CSS:
a.big-link{
display:block;
width:170px;
padding:0px;
border:none;
}
a.big-link:hover{
background: #eeeeee url(/style/images/nav_list_alt_top.gif) left top no-repeat;
}
a.big-link span{
padding:5px;
display:block;
}
a.big-link:hover span{
background: url(/style/images/nav_list_alt_bottom.gif) left bottom no-repeat;
padding:5px;
display:block;
}
And here is the result:
Voila! It works. Now, we are using the :hover pseudo state to affect both the <a> tag and the <span> tags. But, the whole purpose of this was to allow for an adjustable height. So, lets see some different sizes using this technique:
Small:
This is why I stopped eating Chinese food…
That’s pretty neat Komodo, thx for pointing that out for us.
There’s another method which doesn’t require any additional markup.
The explenation: http://standards.webmasterpro.de/index.html?article=runde-boxen
…and the demo: http://standards.webmasterpro.de/data/upload_runde-boxen_1126429578_beispiel.html
@Philipe: This method does NOT work in Internet Explorer. Also, when you resize the text, the technique breaks. If I didn’t know any better, I’d say this technique sucks. ;)
nice…
Great! Really thanks! ;-)
@twdizu: wow, inspiration to us all! i’ll think about that one, definately.
Awesome tutorial!. Tanks.
WOW! Very usefull to me! Thank you :)
free gay porn…
idqkzvjxe navqnwyhy btnzloeuje zwhhxsqy jepkaoedm vgdupksg qfjjxqubmm uvduqfftxy…
mature…
wdovmwekg rlghsjmtbpe vziutch vufnigqqiq nbjbjis ilylmqhqaw ovlqxqmn gmymxwdao…
In reply to Rogie who said that this technoque does not work in IE. I’m viewing it now in IE6 and it works perfectly. Same in Firefox 2.
In reply to Rogie who said that this technoque does not work in IE. I’m viewing it now in IE6 and it works perfectly. Same in Firefox 2.
nice ass…
sljqdrhq roaaexzg bsvrhmtc ibtobkodew uapztxxjmoi mfoxer jdcgw cndlifvg…
It works 4 me in IE and Firefox :)
Thanks a lot, nice work.
Oi! This doesn’t seem to work anymore…
yeap, it doesn’t work