it-swarm.com.ru

Установите: 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 а не с main-nav-item-current , потому что он имеет другой цвет и не должен изменить при наведении. Все теги <a> в menu div должны менять цвет при наведении, кроме метки с классом current .

Как я могу сделать это с помощью CSS?

Я пробовал что-то вроде

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

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

44
anon355079

Попробуй это:

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

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

В основном это сводится к этому:

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

84
Andrew Hare

Каскад вас кусает. Попробуй это:

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

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

9
Scott Radcliff

вы можете просто попробовать:

a.main-nav-item:hover { }
1
Rizo

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

.menu a:hover .main-nav-item

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

Поэтому ты не стал бы писать 

.menu a .main-nav-item:hover

это было бы 

.menu a.main-nav-item:hover
0
DanDan

как насчет .main-nav-item:hover

это снижает специфичность 

0
Aleksej Dix