Установите: hover в зависимости от класса - PullRequest
Новая
       26

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

46 голосов
/ 20 декабря 2009

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

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

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

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

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

Ответы [ 6 ]

87 голосов
/ 20 декабря 2009

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

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

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

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

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

9 голосов
/ 20 декабря 2009

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

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

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

3 голосов
/ 08 февраля 2018

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

a.main-nav-item:hover { }
2 голосов
/ 24 июня 2019

попробуйте 

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

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

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

0 голосов
/ 11 мая 2016

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

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

0 голосов
/ 20 декабря 2009

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

.menu a:hover .main-nav-item

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

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

.menu a .main-nav-item:hover

это будет 

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