Набор a:hover на основе класса

У меня есть следующий 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;
}

думая, что только с классом основного военно-морского объекта изменят цвет на парении а не текущий. Но это не работает.

48
задан Taz 11 June 2012 в 06:00
поделиться

3 ответа

Попробуйте следующее:

.menu a.main-nav-item:hover { }

Чтобы понять, как это работает, важно читать это так, как это делает браузер. a определяет элемент, .main-nav-item квалифицирует элемент только для тех, которые имеют этот класс, и, наконец, псевдо-класс : hover применяется к квалифицированному выражению, которое предшествует.

В основном это сводится к следующему:

Примените это правило наведения ко всем элементам привязки с классом main-nav-item , которые являются потомок любого элемента с меню класса .

96
ответ дан 26 November 2019 в 18:38
поделиться

Каскадирование вас кусает. Попробуйте следующее:

.menu > .main-nav-item:hover
    {
        color:#DDD;
    }

Этот код говорит, что нужно захватить все ссылки, которые имеют класс main-nav-item И являются дочерними по отношению к меню класса, и применить цвет #DDD при наведении курсора.

9
ответ дан 26 November 2019 в 18:38
поделиться

Одна из распространенных ошибок - оставить пробел перед именами классов. Даже если бы это был правильный синтаксис:

.menu a:hover .main-nav-item

, это никогда бы не сработало.

Следовательно, вы бы не написали

.menu a .main-nav-item:hover

, это будет

.menu a.main-nav-item:hover
0
ответ дан 26 November 2019 в 18:38
поделиться