Avoiding hover on images

[shalalem]

Hi :)

Im using CSS to get hover effects on my links mainly to change the background color and link border

The problem is that i dont want the effect on some images that im using as links on the page.The effect changes the background color of the image which i dont want.Is there any way to avoid it?

Heres my Css code

---------------------------------------------
A:visited {color: #9C9A77; text-decoration: underline}
A:link {color: #B1B165;text-decoration: underline }
A:active {color: #B1B165; text-decoration: none}
A:HOVER {COLOR: #B1B165; BACKGROUND-COLOR: #FFFFD7;TEXT-DECORATION: none;border:1px dotted #B1B165}

BODY {
SCROLLBAR-FACE-COLOR: #FFFFD7 ;
SCROLLBAR-HIGHLIGHT-COLOR:#D2B48C ;
SCROLLBAR-SHADOW-COLOR:#FCDE83;
SCROLLBAR-3DLIGHT-COLOR:#CDAA7D;
SCROLLBAR-ARROW-COLOR:#6D6D36;
SCROLLBAR-TRACK-COLOR: #FEFCE7 ;
SCROLLBAR-DARKSHADOW-COLOR:#808040
}

INPUT
{
font : 8pt tekton;
color: #6D6D36;
background-color: #FEFCE7;
border-color: #8B8970;
border-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
border-style: double;
}

----------------------------------------------
Heres my image code
---------------------------------------------------
<A HREF="frame_IE.html" target="_self" >
<IMG SRC="images/off.gif" BORDER="0">
</A>
----------------------------------------------
Thanks :)

Bubbles

[edited by: Nick_W at 5:51 pm (utc) on May 19, 2003]

[MWpro]

This thread is almost identical to your problem. Read Marshall's post; his solution should work.

[webmasterworld.com...]

[shalalem]

Hi :)
Thanks for that but it doesnt seem to work :(
I have no spaces inbetween the tags
Also tried remving line breaks but that doesnt seem to work either

Thanks for the help though:)

Bubbles

[edited by: Nick_W at 5:52 pm (utc) on May 19, 2003]

[drbrain]

You want this:

:link:hover img {
background-color: /* original */
}

[shalalem]

Thanks Drbrain.Will try it out :)

Bubbles

[edited by: Nick_W at 5:52 pm (utc) on May 19, 2003]

[Birdman]

Also, your rules need to be in the correct order:

1) a:link
2) a:visited
3) a:hover
4) a:active

I would also recommend using all lowercase letters. Good luck with it.

I've never seen DrBrain's solution used before. Looks cool! I probably would have just created a class for the <a>s that link images.

a.img,a:link.img,a:visited.img,a:hover.img{
background-color: transparent;
border: none;
}

<A class="img" HREF="frame_IE.html" target="_self" >
<IMG SRC="images/off.gif" BORDER="0">
</A>

It seems that is precisely what Dr's does, just I don't know that approach. Will look into it though.

[shalalem]

Thanks birdman!
That worked!
Check out my page at [hsingh.tamu.edu...]

Thanks a heap! :)

Bubbles

[edited by: Nick_W at 5:52 pm (utc) on May 19, 2003]