2009-05-26 7 views
2

J'ai un lien hypertexte dans mon site que je veux faire partie #A0A0A0 et une partie #880000 pour a:link et a:visited, et je le veux changer à une partie #FFFFFF et une partie #AA0000 pour a:hover et a:active. Mais je veux que ce soit un seul lien. J'ai essayé jusqu'à présent deux solutions, mais aucune n'a fonctionné comme je le voulais.Comment obtenir deux couleurs dans un lien hypertexte?

La première était:

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> 

Dans cette solution, la couleur de la partie centrale ('Array') reste comme #880000 tout le temps et ne change pas #AA0000 pour :hover ou :active.

La seconde solution consiste à créer un <a> </a> pour chaque partie de la chaîne (donc une pour « Dubious », pour une « matrice » et l'autre pour « .net ») et ont la css pour le milieu <a> </a> être

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

Les couleurs ont bien fonctionné de cette façon; mais la chaîne était constituée de trois liens distincts, donc la souris sur un lien ne changerait pas la couleur dans les autres.

donc ce que je veux être en mesure de le faire est de changer le css au milieu d'un lien hypertexte a.menu-a.redMenu puis de nouveau à a.menu, mais je ne peux pas travailler comment. Quelqu'un peut-il résoudre mon problème ici?

Merci, Jacob

Répondre

4

Vous pouvez utiliser votre code HTML d'origine, il suffit de supprimer le style en ligne:

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

simplement Ensuite, ajoutez ces déclarations de CSS pour la durée:

a.menu:link span, a.menu:visited span{color: #880000;} 
a.menu:hover span, a.menu:active span {color: #aa0000;} 
1
a.redMenu:hover span { color: #AA0000; text-decoration: none; } 

Cela indique la durée quelle couleur être quand il est lien parent est plané.

1
<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> 
Questions connexes