Синтаксис псевдоэлемента hover

@СергейСереб · Регистрация: 19.09.2016

Студворк — интернет-сервис помощи студентам

Перечитал все что нашел, но ответа вразумительного не нашел. Простые случаи заменить стили у элемента при наведении на него - не вызывают пока вопросов, а вот изменить поведение одного элемента при наведении на другой, да еще и с вложенностями уже - тупик... Сделал такой пример.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<nav>
            <ul>
                <li class="active"><a href="#">home</a>
                <li><a href="#">about</a>
                <li class="arrow"><a href="#">services</a>
                    <ul class="drop-menu">
                        <li><a href="#">services list</a>
                        <li class="service"><a href="#">services overview</a>
                            <ul class="sub-drop-menu">
                                <li><a href="#">steel work</a>
                                <li><a href="#">project management</a>
                                <li><a href="#">oil & gas</a>
                                <li><a href="#">havy machining</a>
                            </ul>
                        <li><a href="#">faqs</a>
                        <li><a href="#">archive</a>
                    </ul>
                <li><a href="#">contacts</a>
            </ul>
        </nav>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
*{margin: 0;  padding: 0;}
nav {   text-align:center;}
nav li{display:inline-block;position:relative;}
nav a{display:inline-block;font-size: 14px;font-weight: bold;line-height: 18px;text-decoration: none;text-transform: uppercase;
    color: #2c2f32;
    padding: 85px 20px 17px;
}
li:hover.arrow, .active, nav a:hover{   background-color:#c0decb;}
.service:hover .sub-drop-menu{display:block;}
li:hover.arrow>a, .active a, nav a:hover{color:white;}
li:hover.arrow .drop-menu{display:block;}
.drop-menu {display:none;   width: 190px; position: absolute;   list-style: none;   background: #fafafa;    text-align:left;}
.drop-menu li{display:block;position: relative; border-top: 1px solid #f3f3f3;}
.drop-menu a{display: block;padding: 11px 0 10px 20px;}
.drop-menu a:hover, li:hover .service{background-color:#f0f0f0;color:#2c2f32;}
.sub-drop-menu{display:none;position:absolute;top:-1px;left:191px;  width:190px;background: #fafafa;}

Оно в принципе работает, как я и хотел, Основная загвоздка - сохранение отго же фона элементаи цвета текста при открывании соответствующего выпадающего меню. Но вот как оно работает, не смотря на то, что я это делал сам - не понимаю...

По моему понимаю, то что записано ниже, означает следующее:

.service:hover .sub-drop-menu элементу с классом .sub-drop-menu назначить свойства при наведении на элемент с классом .service
li:hover.arrow .drop-menu-Это(запись класса за псевдоэлементом без порбела) я понял, работает так: При наведении на элемент li с классом .arrow, элементу с классом .drop-menu назначить свойства

На последующих трех я завис, т.к. они не укладываются в общую логику..

li:hover.arrow>a Этот у меня призван сохранять текст ссылки элемента с классом .arrow когда курсор не над ним, но открыто выпадающее меню или субменю. т.е. пока активный элемент с классом .arrowхотя курсор и не над ним, по ссылке в начале сообщения понятнее наверное будет о чем речь..
li:hover.arrow - с этим то же что и с предыдущим, только сохраняется не текст, а фон элемента.
li:hover .service - тут сохранение фона одного из элементов выпадающего меню, когда курсор не над ним, но над областью выпадающего субменю.
У этих двух - синтаксис чувствителен к наличию пробела между псевдоэлементом и последующим классом. Если есть побел - оно просто не работает.
Пробовал управлять свойствами элементов ,чтобы задавать и фон и цвет текста через элемент а - не получилось. Поэтому использовал для текста - а, для фона - li

Может кто поможет разобраться в этой моей белиберде?

@DieHardKamikaze · 25.02.2019, 10:42

Я чего-то не знаю, в мире Web'а переворот? Теперь не нужно ставить закрывающие </li>, пусть браузер сам исправляет ошибки?
Селектор а применяет свойства конкретно на то, что внутри тега( <a href="#">services</a> , т.е на текст services ) как и a:hover.
Поэтому когда ты отводишь мышку с ссылки на субменю вот этот твой селектор nav a:hover не работает.

Тег <li> с классом arrow как раз наоборот содержит подменю внутри себя (это для тебя неявно, поскольку ты сам теги закрывающие не расставлял, за тебя это сделал браузер - см. приложенный скрин), т.е даже наводя мышь на подменю ты всё ещё в внутри <li class="arrow">, именно поэтому li:hover.arrow > a применяется.

Селектор c1.c2 и .c1 .c2 - два совершенно разных, подробнее почитай о них и удивление от отсутствия/наличия пробела исчезнет.

И ещё - перечитывай свою писанину, такое скомканное повествование и кучу грамматических ошибок крайне сложно воспринимать. Нормально форматируй код, разбираться в твоём CSS то ещё удовольствие.

@mrtoxas · 25.02.2019, 10:50

Не по теме:

DieHardKamikaze, можно без закрывающего тега, если все соседние элементы тоже li. Хотя, я против такого :D

@СергейСереб · 25.02.2019, 23:05 **[ТС]**

.arrow:hover >a { background-color:#c0decb; }
Свойства могут быть назначены элементам только внутри класса .arrow? Есть возможность управлять в этом случае не только наследниками, но и другими элементами из соседнего класса или более высокого по иерархии?

@DieHardKamikaze · 25.02.2019, 23:50

Приведенный тобой селектор применяет свойства к дочерним

JavaScript
1
a

внутри

JavaScript
1
.arrow:hover

.
Да, есть возможность управлять ещё и соседями, но из детей влиять на родителя невозможно. Почему пояснено здесь.

Всё очень просто - гуглиш СПИСОК СЕЛЕКТОРОВ CSS и ВСЁ! Ты задаешься абсолютно правильными вопросами, но при попытке поиска многие из них у тебя сами очень быстро отпадут.

Новые блоги и статьи Все статьи Все блоги /
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а привычная функция main(). . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/

@DieHardKamikaze 27 / 19 / 8 Регистрация: 21.08.2018 Сообщений: 39
	25.02.2019, 10:42
	Я чего-то не знаю, в мире Web'а переворот? Теперь не нужно ставить закрывающие </li>, пусть браузер сам исправляет ошибки? Селектор а применяет свойства конкретно на то, что внутри тега( <a href="#">services</a> , т.е на текст services ) как и a:hover. Поэтому когда ты отводишь мышку с ссылки на субменю вот этот твой селектор nav a:hover не работает. Тег <li> с классом arrow как раз наоборот содержит подменю внутри себя (это для тебя неявно, поскольку ты сам теги закрывающие не расставлял, за тебя это сделал браузер - см. приложенный скрин), т.е даже наводя мышь на подменю ты всё ещё в внутри <li class="arrow">, именно поэтому li:hover.arrow > a применяется. Селектор c1.c2 и .c1 .c2 - два совершенно разных, подробнее почитай о них и удивление от отсутствия/наличия пробела исчезнет. И ещё - перечитывай свою писанину, такое скомканное повествование и кучу грамматических ошибок крайне сложно воспринимать. Нормально форматируй код, разбираться в твоём CSS то ещё удовольствие. Миниатюры 0

@mrtoxas
	25.02.2019, 10:50
	Не по теме: DieHardKamikaze, можно без закрывающего тега, если все соседние элементы тоже li. Хотя, я против такого :D 0

@СергейСереб 39 / 9 / 10 Регистрация: 19.09.2016 Сообщений: 1,076
	25.02.2019, 23:05 [ТС]
	`.arrow:hover >a { background-color:#c0decb; }` Свойства могут быть назначены элементам только внутри класса `.arrow`? Есть возможность управлять в этом случае не только наследниками, но и другими элементами из соседнего класса или более высокого по иерархии? 0