На этот вопрос уже есть ответ здесь:

Я посмотрел, если на этот вопрос уже был дан ответ, но не смог ничего найти, только вопросы об обратном правиле 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;
    }