CSS наведите указатель мыши на div, но не наведите указатель на его детей

Я посмотрел, был ли уже задан этот вопрос, но ничего не нашел, только вопросы по правилу обратного 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 background color change!</p>
    </div>

CSS

    .parent {
       background: #ffffff;
    }
    .parent:hover {
       background: #aaaaff;
    }
    .class1 {
       margin: 10px;
    }

Ответ 1

Возможность останавливать эффект наведения элемента при зависании дочернего элемента в настоящее время невозможна с помощью селекторов CSS, которые у нас есть, это как можно ближе получить без javascript - воздействовать на ребенка на зависание в дополнение к влиянию на родителя. Это будет работать, только если ребенок составляет 100% от ширины и высоты родительского

В в проекте CSS4 есть родительский селектор !, который можно использовать в следующих случаях:

.parent! .class1:hover {
   background: #ffffff;
}

Но у нас еще нет этой возможности

Ответ 2

Вы можете просто добиться этого, добавив это свойство в дочерний класс CSS.

pointer-events: none;

Это сработало для меня.

Ответ 3

Fiddle на основе этого ответа:

<style>
    .parent { padding: 100px; width: 400px; height:400px; position: relative; z-index: 998; }
    .parent:hover { background-color: green; }
    .child { padding: 100px; width: 200px; height:200px; position: relative; z-index: 1000; }
    .child:hover { background-color: blue; }
    .parent-overwrite { padding: inherit; width: inherit; height: inherit; position: absolute; top: 0; left: 0; z-index: 999; background-color: #FFF; display: none; }
    .child:hover ~ .parent-overwrite { display: block; }
</style>

<div class="parent">
    <div class="child">Child</div>
    <div class="parent-overwrite"></div>
</div>

Вам следует использовать JavaScript. В настоящее время он не является действительно с чистым CSS, как уже сказал Зак Саулье.

Ответ 4

Вы не можете сделать это с помощью чистого CSS, но его легко достичь с помощью jQuery. Поэтому, когда вы наведите указатель мыши на ребенка, вы не хотите изменять родителя.

https://jsfiddle.net/8nqfLgsk/2/

$(".list-categories li a").hover( function(){

   $(this).toggleClass("active-btn");

});

В основном с этим вы добавляете только класс к элементу, над которым вы находитесь, не изменяя родителя.

Ответ 5

В каждом дочернем классе просто добавьте это свойство css:

cursor: pointer;