Несколько стилей переходящих ссылок

Я уверен, что это довольно простое решение, но я не смог понять это.

Я использовал свойства страницы в Dreamweaver, чтобы придумать CSS для ссылок на странице, и все работало правильно. Теперь у меня есть одна строка, где мне нужно изменить и ссылку, и цвет при наведении для нескольких ссылок.

<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>

Мне удалось успешно изменить цвет ссылки с помощью приведенного ниже кода в теле.

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

То, что я не смог сделать успешно, это изменить ролловер. Я искал и пробовал несколько разных методов, чтобы решить проблему, но безуспешно. Может ли кто-нибудь указать, что я делаю неправильно, или привести пример того, как должен выглядеть CSS?

Источник

4 ответа

Решение

Использовать имена классов вместо того, чтобы просто нацеливаться на 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>
Источник

Дайте вашим специальным ссылкам специальный класс:

CSS

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

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

HTML

<a href="#" class="link">Website</a>
Источник

Так что для раскраски ссылки вам просто нужно:

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

Тогда, если вы зависаете, вы хотите:

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;
}

ДЕМО ЗДЕСЬ

Кроме того, если вы не хотите, чтобы это было для ВСЕХ ссылок, вы предоставляете им класс:

HTML:

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

CSS:

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

.test:hover {
  color: red;
}

ДЕМО ЗДЕСЬ

Источник

Самый простой способ изменить цвета для всей строки - добавить класс к указанной строке (или <tr>(Я предполагаю), а затем добавить CSS для всех ссылок, которые являются потомками элемента с этим классом.

Я делаю некоторые предположения относительно вашего HTML, но он, вероятно, будет выглядеть примерно так...

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; }
Источник
Другие вопросы по тегам