Multiple Styles of Rollover Links

Question

Multiple Styles of Rollover Links

57 views Asked by JamesGGray At 15 January 2014 at 20:13

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?

Original Q&A

There are 4 answers

Ruddy On 15 January 2014 at 20:16

So to colour the link you just need:

a{
    color: rgb(20,80,153);
    text-decoration: none;
}

Then if its hover you want:

a:hover {
    color: red;
}

HTML:

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

CSS:

a{
    color: rgb(20,80,153);
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #000000;
}
a:hover {
    color: red;
}

DEMO HERE

On top of that, if you do not want it for ALL links you give them a class:

HTML:

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

CSS:

.test {
  color: rgb(20,80,153);
}

.test:hover {
  color: red;
}

DEMO HERE

Jordan Foreman On 15 January 2014 at 20:16

Give your special links a special class:

CSS

.link
{
    color: rgb(20, 80, 153);
}

.link:hover{..}
.link:active{..}
.link:visited{..}

HTML

<a href="#" class="link">Website</a>

tiny sauce On 15 January 2014 at 20:23

The easiest way to change the colors for a entire row would be to add a class to said row (or <tr>, I'm assuming) and then add CSS for all links that are descendants of a element with that class.

I'm making some assumptions on your HTML, but it will probably go something like this...

HTML:

<tr class="atl-color">
<td><a href="#">Link #1</a></td>
<td><a href="#">Link #2</a></td>
</tr>

CSS:

.alt-color a:link { color: blue; }
.alt-color a:hover { color: red; }

**jmore009** · Accepted Answer · 2014-01-15 20:15:57

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>

TechQA.

Multiple Styles of Rollover Links

There are 4 answers

HTML:

CSS:

HTML:

CSS:

Related Questions in HTML

Related Questions in CSS

Related Questions in ROLLOVERS

Popular Questions

Popular Tags

Trending Questions