Using IDs and classes for unique hovers in a page

[mlandrethsf]

Hi -
Well, after trying to wade through many html tutorials, using the IDs and classes still evades me. All of the tutorials give one little basic example and move on.

My situation:
I have a page with a hover link set up so that any link on the page sparkles when you mouseover it. I like it. Its pretty and I dont want to part with it.

However, I am also trying to set up a specific link that has a unique hover image.

Separetly, they work like a charm.
Together, the sparkles just take over.

Can you please spell out for me exactly what the code needs to look like, please? BTW, I am only using html, no javascript.

Any insight is much appreciated.

Michelle

[Mr J]

Do you mean like this?

<style>
A#lnk1{background-color:#555544;color:#FFFFFF;width:100px;padding-left:5px;border-bottom:1px solid #00FF00;display:block}
A#lnk1:hover{background-color:#DDDDAA}
A#lnk1:active{background-color:#AAAA77}
A#lnk1:focus{background-color:#AAAA77}

A#lnk2{background-color:#554444;color:#FFFFFF;width:100px;padding-left:5px;border-bottom:1px solid #00FF00;display:block}
A#lnk2:hover{background-color:#DDAAAA}
A#lnk2:active{background-color:#AA7777}
A#lnk2:focus{background-color:#AA7777}

A#lnk3{background-color:#444455;color:#FFFFFF;width:100px;padding-left:5px;border-bottom:1px solid #00FF00;display:block}
A#lnk3:hover{background-color:#AAAADD}
A#lnk3:active{background-color:#7777AA}
A#lnk3:focus{background-color:#7777AA}
</style>

<a id="lnk1" href="#null">Link 1</a>
<a id="lnk2" href="#null">Link 2</a>
<a id="lnk3" href="#null">Link 3</a>