images, borders, links 1

[iisman]

Greetings,

I have an image, with text alongside, that both link to another page (same page) The text changes color when either the image or text is hovered. This is good. BUT, my image has a 1px border that I also want to chnge color when hovered. I can not seem to achieve this. my attemtps have cause a border to go around the whole thing, image AND text, when only should go around the image.

heres the code:

HTML:

<a class="archives" href="[URL unfurl="true"]http://somelink/file.asp">[/URL]
<img src="[URL unfurl="true"]http://somelink/file.gif"[/URL] alt="Archives" align="middle" class="archiveimg"/>To Archive Page</a>

CSS:

a.archives:link    {color: #333333; font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; font-weight: normal; text-decoration: none}
a.archives:visited {color: #333333; font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; font-weight: normal; text-decoration: none}
a.archives:active  {color: #333333; font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; font-weight: normal; text-decoration: none}
a.archives:hover   {color: #00ff00; font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; font-weight: normal; text-decoration: none}

.archiveimg 	{border: 1px solid #282484}

 

[ChrisHunt]

Try this (I've removed a lot of redundant code too):

a.archives:link, a.archives:visited, a.archives:active
{color: #333333; font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; font-weight: normal; text-decoration: none}

a.archives:hover   {color: #00ff00;}

.archiveimg     {border: 1px solid #282484}

[b]a.archives:hover .archiveimg {border-color: #00ff00;}[/b]

If the font family/size/weight of these links is the same as the ordinary body text, you don't need to repeat them in the a.archives rule - they'll be inherited. It's best to rely on inheritance wherever possible, partly because it keeps the file size down, and partly because it makes it easier to change things when you want to.

You can also do without the archiveimg class, assuming you want all images in an archives link to behave like that:

.archives img {border: 1px solid #282484}

a.archives:hover img {border-color: #00ff00;}

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd