Почему не меняется background?

@Noobichek · Регистрация: 19.07.2016

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

Объясните - Почему?!!!?:

HTML5
1
2
3
4
<a class="menu" href="#">rivet</a>
<p class="works1">rivet</p>
<div class="banner">
</div>

CSS
1
2
3
4
5
6
.banner{background:red; height: 100px;width:100px;}
 
p.works1 {color:red}
 
.menu:hover +.works1 {color:green;}
.menu:hover +.banner {background:green;}

По сути решаю тот же вопрос что и топикстартер.
Но мне даже важнее ни вопрос "как?" а вопрос почему?! Почему не меняется стиль для background?!

Добавлено через 7 минут
Товарищ Тохас Сан,

Благодаря вашему ответу выше решил "как?". Но по прежнему не могу понять почему!
Чем "~" лучше "+"?

Комментарий модератора

На каждый вопрос создавайте по одной теме! (Правила п.4.4)

@AlexZaw · 07.10.2017, 14:43

Потому что "+" выбирает соседний селектор если тот следует СРАЗУ за первым.
Поэтому .menu:hover +.works1 срабатывает, так как в хтмл коде <p class="works1" идет сразу за <a class="menu", а
.menu:hover +.banner не срабатывает так как между <div class="banner">и <a class="menu" есть еще <p class="works1">.
В этом случае нужно использовать другую комбинацию селекторов, а именно "~".
К примеру, для селектора h1~p стиль будет применяться ко всем элементам <p>, располагающихся после заголовка <h1>. При этом <h1> и <p> должны иметь общего родителя, так что если <p> вставить внутрь <div>, то стили применяться уже не будут.
В вашем случае вот так: .menu:hover ~.banner {background:green;} и все заработает.

Новые блоги и статьи Все статьи Все блоги /
Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .
Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .

@AlexZaw Модератор 2381 / 1741 / 677 Регистрация: 07.08.2016 Сообщений: 4,095
	07.10.2017, 14:43
	Потому что "+" выбирает соседний селектор если тот следует СРАЗУ за первым. Поэтому `.menu:hover +.works1` срабатывает, так как в хтмл коде `<p class="works1"` идет сразу за `<a class="menu"`, а `.menu:hover +.banner` не срабатывает так как между `<div class="banner">`и `<a class="menu"` есть еще `<p class="works1">`. В этом случае нужно использовать другую комбинацию селекторов, а именно "~". К примеру, для селектора h1~p стиль будет применяться ко всем элементам <p>, располагающихся после заголовка <h1>. При этом <h1> и <p> должны иметь общего родителя, так что если <p> вставить внутрь <div>, то стили применяться уже не будут. В вашем случае вот так: `.menu:hover ~.banner {background:green;}` и все заработает. 1