Изменить цвет текста гиперссылки

Question

Я создаю панель меню навигации. Я хочу, чтобы одна из ссылок href могла менять цвета буквой без эффекта мыши, если вы знаете, что я имею в виду. Вот пример:

Посмотрите, как гиперссылка «Создать бесплатную учетную запись» переключается с одного цвета на другой? Это то, о чем я говорю.

Если этот вопрос звучит немного расплывчато, я попытаюсь его повторить.

Answer 1

Вы должны быть в состоянии достичь этого, добавив классы к гиперссылкам, по 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; 
} 

Answer 2

Вы можете поместить все ссылки в DIV, а затем прикрепить CSS A: парить в этот 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

Место это c ode в пределах 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

Попробуйте 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 });    
});