javascript - 更改超链接的文本颜色

Question

我正在制作一个导航菜单栏。如果您知道我的意思，我想要它，以便一个 href 链接可以逐个字母地更改颜色，而不会产生任何鼠标悬停效果。这是一个例子：

看看“创建免费帐户”超链接如何从一种颜色切换到另一种颜色？这就是我所指的。

如果这个问题听起来有点模糊，我会尝试重新措辞。

Answer 1

尝试使用 jQuery 滑动字母，您必须使用lettering.js插件。

例子

<div class="sl_examples">
  <a href="#" id="example1" data-hover="Creativity">Illustrations</a>
</div>

.sl_examples{
   float:left;
   font-family: 'Bevan', arial, serif;
   font-size:50px;
   line-height:50px;
   color:#f0f0f0;
   margin-right:5px;
   text-transform:uppercase;
}
.sl_examples a{
   display:block;
   position:relative;
   float:left;
   clear:both;
   color:#fff;
}
.sl_examples a > span{
   height:50px;
   float:left;
   position:relative;
   overflow:hidden;
}
.sl_examples a span span{
   position:absolute;
   display:block;
   left:0px;
   top:0px;
   text-align:center;
}
.sl_examples a span span.sl-w1{
   color:#fff;
   text-shadow:0px 0px 1px #fff;
   z-index:2;
}  
.sl_examples a span span.sl-w2{
   color:#e82760;
   text-shadow:-1px 1px 2px #9f0633;
   z-index:3;
}


$(window).load(function() {
  $('#example1').hoverwords({ delay:50 });            
});

Answer 2

您可以将所有链接放在一个 DIV 中，然后将 CSS a:hover 附加到该 div，如下所示：

CSS

#menu a {
    color: blue;
}
#menu a:hover {
    color: red;
}

HTML

<div id="menu">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
</div>

Answer 3

将此代码放在head标签中。并根据需要更改颜色代码。请记住，它 ( css) 将适用于您的所有超链接。

<style type="text/css">
    <!--
        a:link {
            text-decoration: none;
            color: #000000;
        }
        a:visited {
            text-decoration: none;
            color: #000000;
        }
        a:hover {
            text-decoration: underline;
            color: #CC9933;
        }
        a:active {
            text-decoration: none;
            color: #006633;
        }
    -->
</style>

Answer 4

您应该能够通过向超链接添加类来实现这一点，每种颜色 1 个类。例如

<!-- HTML -->
<a class="blue" href="#">Blue Hyperlink</a>
<a class="blue" href="#">Another Blue Hyperlink</a>
<a class="orange" href="#">Orange Hyperlink</a>
<a class="red" href="#">Red Hyperlink</a>

/* CSS */
.blue {
    color: #00F;
}

.orange {
    color: #FA0;
}

.red {
    color: #F00;
}