Sent by Paul Boag on 15 June 2005 18:06
OK if your code is this:
<a href="foo.htm"><img src="foo"
class="border"></a>
There are several methods you could use. However my personal favourite would be:
a:link{border: 1px solid red}
a:hover{border: 3px solid red}
However that will then apply this effect to all links. So you are better going for:
<div class="border"><a href="foo.htm"><img src="foo"></a></div>
And
..border a:link{border: 1px solid red}
..border a:hover{border: 3px solid red}
I know its an extra DIV but it’s the only way I can quickly think of ensuring cross browser support
as IE only allows you to have hover states on a link.
Hope that helps.
Paul
P A U L @ B O A G W O R L D
News and advice on running a web site without overwhelming you with techno babble!
www.boagworld.com
Hello,
I am having trouble getting an image rollover effect to work in CSS.
Basicially I have a thumbnail image that I want to have a border that expands when you mouseover the
image (which is a link).
the code would be something like <a href="foo.htm"><img src="foo"
class="border"></a>
and I thought in CSS this would work:
img.border a:link{border: 1px solid red}
img.border a:hover{border: 3px solid red}
but it doesn't.
what would be the proper method here?
--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.323 / Virus Database: 267.7.3/15 - Release Date: 14/06/2005
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
