Search code examples
htmlcssrollovers

Multiple Styles of Rollover Links

I'm sure this is a rather simple fix but I haven't been able to figure it out.

I used the page properties in Dreamweaver to come up with the CSS for the links on the page and everything was working correctly. I now have one row where I need to change both the link and hover colors for a few links.

<head>
<style type="text/css">
<!--
body {
background-color: #666666;
}

a:link {
color: #000000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: none;
color: #666666;
}
a:active {
text-decoration: none;
color: #000000;
-->
</style>
</head>

I was able to change the link color successfully by using the code below in the body.

<a href="url" target="_blank" style="color: rgb(20,80,153)">Website</a>

What I have not been able to do successfully is change the rollover. I've searched and tried a few different methods to solve the problem but haven't had any success. Could somebody point out what I'm doing wrong or give me an example of how the CSS should look?

Solution

  • use class names instead of just targeting the a

    CSS

    a.someName1:link {
    color: #000000;
    text-decoration: none;
}

a.someName1:visited {
    text-decoration: none;
    color: #000000;
}

a.someName1:hover {
   text-decoration: none;
   color: #666666;
}

a.someName1:active {
   text-decoration: none;
   color: #000000;
 }

    HTML

    <a href="url" target="_blank" class="someName1">Website</a>