Question

我无法创建链接（a href），其中某些字符以不同的颜色显示但作为一个链接运行！

我试着想出创意并提出以下代码。

HTML：

<a href="#" class="char1"> T </a>
<a href="#" class="char2"> E </a>
<a href="#" class="char3"> S </a>
<a href="#" class="char4"> T </a>

CSS：

a.char1:link {color:#fff; font-size:13pt; text-decoration:none;}
a.char1:visited {color:#fff; font-size:13pt; text-decoration:none;}
a.char1:active {color:#fff; font-size:13pt; text-decoration:none;}
a.char1:hover {color:blue; font-size:13pt; text-decoration:none;}

a.char2:link {color:#fff; font-size:13pt; text-decoration:none;}
a.char2:visited {color:#fff; font-size:13pt; text-decoration:none;}
a.char2:active {color:#fff; font-size:13pt; text-decoration:none;}
a.char2:hover {color:red; font-size:13pt; text-decoration:none;}

a.char3:link {color:#fff; font-size:13pt; text-decoration:none;}
a.char3:visited {color:#fff; font-size:13pt; text-decoration:none;}
a.char3:active {color:#fff; font-size:13pt; text-decoration:none;}
a.char3:link {color:green; font-size:13pt; text-decoration:none;}

a.char4:link {color:#fff; font-size:13pt; text-decoration:none;}
a.char4:visited {color:#fff; font-size:13pt; text-decoration:none;}
a.char4:active {color:#fff; font-size:13pt; text-decoration:none;}
a.char4:hover {color:yellow; font-size:13pt; text-decoration:none;}

但当然，它们不会作为单一链接发挥作用......

再次简化我的问题我要创建a href所有'四个'字符（T，E，S，T）在悬停时以不同的颜色显示 （a.char：悬停）

“尽管在这种情况下只剩下一个角色”

提前致谢！

Answer 1

像这样 - 将文本放入锚标记中的跨度：

 body {
   background-color: #656565;
 }
 a:link .char1 {
   color: #fff;
   font-size: 13pt;
   text-decoration: none;
 }
 a:visited .char1 {
   color: #fff;
   font-size: 13pt;
   text-decoration: none;
 }
 a:active .char1 {
   color: #fff;
   font-size: 13pt;
   text-decoration: none;
 }
 a:hover .char1 {
   color: blue;
   font-size: 13pt;
   text-decoration: none;
 }
 a:link .char2 {
   color: #fff;
   font-size: 13pt;
   text-decoration: none;
 }
 a:visited .char2 {
   color: #fff;
   font-size: 13pt;
   text-decoration: none;
 }
 a:active .char2 {
   color: #fff;
   font-size: 13pt;
   text-decoration: none;
 }
 a:hover .char2 {
   color: red;
   font-size: 13pt;
   text-decoration: none;
 }
 a:link .char3 {
   color: #fff;
   font-size: 13pt;
   text-decoration: none;
 }
 a:visited .char3 {
   color: #fff;
   font-size: 13pt;
   text-decoration: none;
 }
 a:active .char3 {
   color: #fff;
   font-size: 13pt;
   text-decoration: none;
 }
 a:link .char3 {
   color: green;
   font-size: 13pt;
   text-decoration: none;
 }
 a:link .char4 {
   color: #fff;
   font-size: 13pt;
   text-decoration: none;
 }
 a:visited .char4 {
   color: #fff;
   font-size: 13pt;
   text-decoration: none;
 }
 a:active .char4 {
   color: #fff;
   font-size: 13pt;
   text-decoration: none;
 }
 a:hover .char4 {
   color: yellow;
   font-size: 13pt;
   text-decoration: none;
 }

<a href="#">
  <span class="char1">T</span>
  <span class="char2">E</span>
  <span class="char3">S</span>
  <span class="char4">T</span>
</a>

Answer 2

你也必须为char 3悬停。

HTML：

 <a href="#">
<span class="char1">T</span>
<span class="char2">E</span>
<span class="char3">S</span>
<span class="char4">T</span>
</a>

CSS：

a:link  .char1 .char2 .char3 .char4
{color:#fff; font-size:13pt; text-decoration:none;}

a:visited .char1 .char2 .char3 .char4
{color:#fff; font-size:13pt; text-decoration:none;}

a:active .char1 .char2 .char3 .char4
{color:#fff; font-size:13pt; text-decoration:none;}

a:hover .char1 {color:blue; font-size:13pt; text-decoration:none;}
a:hover .char2 {color:red; font-size:13pt; text-decoration:none;}
a:hover  .char3{color:green; font-size:13pt; text-decoration:none;}
a:hover  .char4{color:yellow; font-size:13pt; text-decoration:none;}

如何使多个链接功能与不同的CSS样式？

2 个答案: