CSS наведите курсор на div, но не если наведите курсор на его детей [дубликат]
На этот вопрос уже есть ответ здесь:
Как подать заявку ребенок: hover, но не родитель: hover 5 ответовЯ посмотрел, если на этот вопрос уже был дан ответ, но не смог ничего найти, только вопросы об обратном правиле CSS, которое я ищу.
У меня есть div, который содержит одного или нескольких дочерних элементов, и я хочу, чтобы он менял свой фон при наведении, но не при наведении на него одного из его дочерних элементов; Мне нужно, чтобы правило: hover было ограничено чистым элементом, а не его потомками, которые он содержит. Будучи не родительским правилом в CSS, и будучи: hover, запускается всякий раз, когда мышь проходит над родителем И его дочерними элементами, я обнаруживаю, что у меня нет идей, и, возможно, этого результата невозможно достичь только с помощью CSS. Тем не менее, вопрос касается CSS, поэтому решение JS или JQuery не требуется (я могу предоставить это сам)
Код:
HTML
<div class="parent">Text of the parent
<p class="class1">I do not need to trigger parent's background color change!</p>
</div>
CSS
.parent {
background: #ffffff;
}
.parent:hover {
background: #aaaaff;
}
.class1 {
margin: 10px;
}