У меня есть следующий 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-current, потому что это имеет другой цвет и не должно изменяться на парении. Все <a>
теги в отделении меню должны изменить цвет на парении кроме того с текущим классом.
Как я могу сделать это с помощью CSS?
Я попробовал что-то как
.menu a:hover .main-nav-item
{
color:#DDD;
}
думая, что только с классом основного военно-морского объекта изменят цвет на парении а не текущий. Но это не работает.
Попробуйте следующее:
.menu a.main-nav-item:hover { }
Чтобы понять, как это работает, важно читать это так, как это делает браузер. a
определяет элемент, .main-nav-item
квалифицирует элемент только для тех, которые имеют этот класс, и, наконец, псевдо-класс : hover
применяется к квалифицированному выражению, которое предшествует.
В основном это сводится к следующему:
Примените это правило наведения ко всем элементам привязки с классом
main-nav-item
, которые являются потомок любого элемента с меню класса.
Каскадирование вас кусает. Попробуйте следующее:
.menu > .main-nav-item:hover
{
color:#DDD;
}
Этот код говорит, что нужно захватить все ссылки, которые имеют класс main-nav-item И являются дочерними по отношению к меню класса, и применить цвет #DDD при наведении курсора.
Одна из распространенных ошибок - оставить пробел перед именами классов. Даже если бы это был правильный синтаксис:
.menu a:hover .main-nav-item
, это никогда бы не сработало.
Следовательно, вы бы не написали
.menu a .main-nav-item:hover
, это будет
.menu a.main-nav-item:hover