У меня есть следующий HTML:
<div class="menu">
<a class="main-nav-item" href="home">home</a>
<a class="main-nav-item-current" href="business">business</a>
<a class="main-nav-item" href="about-me">about me</a>
</div>
В CSS я хочу установить для a:hover
для этих пунктов меню определенный цвет. Поэтому я пишу:
.menu a:hover
{
color:#DDD;
}
Но я хочу установить этот цвет a:hover
только для тегов <a>
с классом main-nav-item, а не с main-nav-item-current, потому что он имеет другой цвет и не должен изменение на зависании. Все теги <a>
в меню div должны менять цвет при наведении, кроме одного с текущим классом.
Как это сделать с помощью CSS?
Я пробовал что-то вроде
.menu a:hover .main-nav-item
{
color:#DDD;
}
думают, что только те, у кого класс main-nav-item, будут меняться цветом при наведении, а не в текущем. Но он не работает.