Pergunta

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?

Foi útil?

Solução 3

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>

Outras dicas

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>

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

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; }
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top