Question

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

enter image description here 了解“创建免费帐户”超链接如何从一种颜色切换到另一种颜色？这就是我所说的。

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

Answer 1

尝试Sliding letters with 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

您应该可以通过向超链接添加类来实现此目的，每种颜色都有1个类。 E.G。

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

Answer 3

您可以将所有链接放在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 4

将此代码放在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>

更改超链接的文本颜色

4 个答案: