Создал пользовательский класс CSS, хочу изменить цвет наведения ссылки, но он не работает

Question

Я пытаюсь выяснить, как изменить цвет наведения ссылки на # 666666 на определенный набор ссылок, поэтому я создал пользовательский класс CSS. Однако эффект не работает. Я пробовал несколько вещей, например, вложенность класса в тег div, но мои текущие HTML и CSS выглядят следующим образом. Я ОЧЕНЬ новый код, поэтому любая помощь приветствуется.

<p style="text-align: center;"> 
<a class="supportlinks" href="http://www.sharepointflex.org/pricing-plans/"> 
<span style="color: #3fa9f5; text-align: center; font-size: 18px;">Implementation Support</span></a>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​</p> 

.supportlinks:hover {color:#666666; text-decoration:none;} 

Answer 1

Вы используете встроенный стиль на своем span, поэтому, если вы хотите избежать использования !important, который я рекомендую, вам придется избавиться от встроенного стиля.

Я бы также рекомендовал перемещать другие встроенные объявления в ваш CSS, но в следующем примере показано минимальное количество рефакторинга, чтобы заставить его работать.

Вот Демо, который показывает, как вы могли бы вытащить встроенный стиль из в правило CSS:

.supportlinks {color: #3fa9f5;} 
 
.supportlinks:hover {color:#666666; text-decoration:none;}

<p style="text-align: center;"> 
 
<a class="supportlinks" href="http://www.sharepointflex.org/pricing-plans/"> 
 
<span style="text-align: center; font-size: 18px;">Implementation Support</span></a></p>

JSFiddle Версия: https://jsfiddle.net/f8dhtcz6/

Answer 2

https://jsfiddle.net/uprhu09L/

Переехал цвет от вашего стиля своего класса

так что теперь классы

.supportlinks{color: #3fa9f5;} 
.supportlinks:hover {color:#666666; text-decoration:none;} 

HTML является

<p style="text-align: center;"> 
<a class="supportlinks" href="http://www.sharepointflex.org/pricing-plans/"> 
<span style="text-align: center; font-size: 18px;">Implementation Support</span></a></p> 

Answer 3

<p style="text-align: center;"> 
    <a class="supportlinks" href="http://www.sharepointflex.org/pricing-plans/"> 
    <span style="">Implementation Support</span> 
    </a> 
​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​</p> 

.supportlinks { 
    text-decoration: none; 
} 
.supportlinks span { 
    color: #3fa9f5; 
    text-align: center; 
    font-size: 18px; 
} 
.supportlinks:hover span { 
    color:#666666; 
    text-decoration:none; 
} 

Fiddle here

1. Вы пытаетесь создать привязку при наведении курсора, но встроенный стиль для размещения дочернего элемента в якоре имеет приоритет.
2. Я не уверен, что здесь действительно полезен пролет внутри якоря, но по вашему усмотрению.

Надеюсь, это поможет!