Как получить два цвета в одной гиперссылке? - PullRequest
Новая
       12

Как получить два цвета в одной гиперссылке?

2 голосов
/ 26 мая 2009

У меня есть гиперссылка на моем веб-сайте, которую я хочу быть частью #A0A0A0 и частью #880000 для a:link и a:visited, и я хочу изменить ее на часть #FFFFFF и часть #AA0000 для a:hover и a:active. Но я хочу, чтобы это была одна ссылка. До сих пор я пробовал два решения, но ни одно из них не получилось так, как я хочу.

Первый был: 

a.menu:link { color: #a0a0a0; text-decoration: none; }

a.menu:visited { color: #a0a0a0; text-decoration: none; }

a.menu:hover { color: #ffffff; text-decoration: none; }

a.menu:active { color: #ffffff; text-decoration: none; }

<a class="menu" href="/about.html">Dubious
    <span style="color: #880000;">Array</span>
.net</a>

В этом решении цвет средней части («Массив») остается как #880000 все время и не меняется на #AA0000 для :hover или :active.

Второе решение состояло в том, чтобы создать <a> </a> для каждой части строки (то есть один для «Dubious», один для «Array» и один для «.net») и иметь css для середины <a> </a> быть 

a.redMenu:link { color: #880000; text-decoration: none; }

a.redMenu:visited { color: #880000; text-decoration: none; }

a.redMenu:hover { color: #AA0000; text-decoration: none; }

a.redMenu:active { color: #AA0000; text-decoration: none; }

Цвета так работали нормально но строка состояла из трех отдельных ссылок, поэтому наведение над одной ссылкой не изменило бы цвет в других.

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

Спасибо, Джейкоб

Ответы [ 3 ]

4 голосов
/ 26 мая 2009

Вы можете использовать свой оригинальный HTML, просто удалите встроенный стиль: 

<a class="menu" href="/about.html">
 Dubious<span>Array</span>.net
</a>

Затем просто добавьте эти объявления CSS для span: 

a.menu:link span, a.menu:visited span{color: #880000;}
a.menu:hover span, a.menu:active span {color: #aa0000;}
1 голос
/ 26 мая 2009 
<html>
<head>

<style type="text/css">

p { background: #00c }
a.menu:link    { color: #a0a0a0; text-decoration: none; }
a.menu:visited { color: #a0a0a0; text-decoration: none; }
a.menu:active  { color: #ffffff; text-decoration: none; }
a.menu:hover span.normal { color: #800 }
a.menu:hover span.hilite { color: #880 }

</style>

</head>

<body>

    <p><a class="menu" href="/about.html"><span class="normal">Dubious
        <span class="hilite">Array</span> .net</span></a>
    </p>

</body>
</html>
1 голос
/ 26 мая 2009 
a.redMenu:hover span { color: #AA0000; text-decoration: none; }

Указывает span , какой цвет должен быть при наведении родительской ссылки.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...