Установите: зависание на основе класса

У меня есть следующий 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, будут меняться цветом при наведении, а не в текущем. Но он не работает.

Ответы

Ответ 1

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

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

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

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

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

Ответ 2

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

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

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

Ответ 3

Установите: hover в зависимости от класса, который вы можете просто попробовать:

a.main-nav-item:hover { }

Ответ 4

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

.menu a:hover .main-nav-item

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

Поэтому вы не пишете

.menu a .main-nav-item:hover

это будет

.menu a.main-nav-item:hover

Ответ 5

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

это сохраняет низкую специфичность

Ответ 6

попробуй это

.div
{
text-decoration:none;
font-size:16;
display:block;
padding:14px;
}

.div a:hover
{
background-color:#080808;
color:white;
}

Допустим, у нас есть тег привязки, используемый в нашем коде, и класс "div" вызывается в основной программе. a: hover сделает это, он придаст вампиру черный цвет на фоне и белый цвет на текст, когда мышь наведена на него, что означает наведение.