Несколько разных изменений цвета шрифта при наведении курсора в CSS / HTML

Question

Подождите!Это не просто «как изменить цвет шрифта при наведении курсора мыши на изображение / текст / и т. Д.?»кусок текста), но я слышал, что стиль должен быть отделен от контента .Я борюсь со своими хакерскими программистскими маршрутами и пытаюсь стать более дисциплинированным.Поэтому я здесь, чтобы попросить лучший способ сделать это.

У меня есть простое меню ссылок на сайте, который я сделал, и я бы хотел, чтобы оничерный шрифт (когда мышь не наведена), а затем измените его на цвет при наведении курсора мыши.Но я бы хотел, чтобы каждый переворачивал свой цвет, когда курсор мыши над ним .

Должен ли я назвать стиль для каждого из этих цветов, а затем объявить div, когда каждый используется?Это выглядит почти так же, как и стиль.

Буду очень признателен за мудрый совет о том, как сделать это правильно!

Answer 1

Делайте все это с помощью CSS - просто дайте им разные имена классов и :hover состояния. Поменяйте местами имена классов, используя JavaScript для создания разных цветов после каждого события наведения мыши.

HTML:

<a href="..." class="c1">MENU TEXT</a>

CSS:

.c1 { background-color:#003300 }
.c1:hover { background-color:#006600 }
.c2 { background-color:#003300 }
.c2:hover { background-color:#006600 }
.....

Answer 2

CSS:

<style type="text/css">
    a { color: black; }
    a:hover { color: grey; }
    a.green:hover { color: green; }
    a.red:hover { color: red; }
    a.blue:hover { color: blue; }
    .content a:hover, .content a.green:hover, .content a.red:hover, .content a.blue:hover { color: yellow; }
</style>

HTML:

<a href="#" class="green">green link</a>
<a href="#" class="red">red link<a>
<a href="#" class="blue">blue link</a>
<a href="#" >grey link</a>

<div class="content">
    <a href="#" class="green">yellow link</a>
    <a href="#" class="red">yellow link<a>
    <a href="#" class="blue">yellow link</a>
    <a href="#" >yellow link</a>
</div>

Answer 3

Вы просто должны дать всем различным ссылкам / li s другой класс, чтобы сделать это.

HTML

<ul class="menu">
  <li class="home">Home</li>
  <li class="contact">Contact</li>
  <li class="help">Help</li>
</ul>

CSS

ul.menu li a { color: black; }
ul.menu li.home:hover a { color: #000000; }
ul.menu li.contact:hover a { color: #ffffff; }
ul.menu li.help:hover a { color: #ff3300; }

Это не самый лучший способ: лучший способ - использовать селектор псевдокласса CSS: nth-child.

http://reference.sitepoint.com/css/pseudoclass-nthchild

Однако неожиданный сюрприз IE не поддерживает. Также старые браузеры не будут поддерживать его.

Чтобы узнать, какие браузеры поддерживают его, смотрите:

http://caniuse.com/#search=nth

Answer 4

Вы можете использовать CSS-селектор nth-child, вот пример:

#yourMenu ul li:nth-child(1) {
  color: #ff0000;
}
#yourMenu ul li:nth-child(2) {
  color: #00ff00;
}
#yourMenu ul li:nth-child(3) {
  color: #0000ff;
}
...
..