Сделать css: hover влияет только на родительский элемент

В css, как я могу остановить запуск события :hover в родительском элементе при зависании дочернего события, чтобы оно срабатывало только при зависании самого родителя? В этом случае мой дочерний элемент фактически расположен за пределами родительского элемента с абсолютным позиционированием, поэтому немного странно, когда родительский элемент изменяется при наведении курсора на дочерний элемент.

Я создал JSFiddle, чтобы проиллюстрировать проблему.

Вот JSFiddle используемого решения для моего примера.


css hover pseudo-class
person CupOfTea696    schedule 29.09.2012    source источник

Ответы (3)


arrow_upward
16
arrow_downward

Существует чистое решение css (даже два на самом деле), но оба имеют свою цену.

  1. Вы можете добавить события-указатели: none; к вашему дочернему элементу, но он также не будет реагировать на собственные стили наведения. События указателя, к сожалению, не поддерживаются в IE ниже версии 11 (http://caniuse.com/#search=pointer-events).

  2. Оберните содержимое вашего родительского элемента (кроме позиционированного дочернего элемента) в другой (это стоимость этого метода) и примените стили наведения к этой оболочке.

Примеры обоих методов здесь.

.parent-2,
.parent { position:relative; background:#ddd; width:100px; height:100px; }
.parent:hover { background:blue; }
.child { position:absolute; top:0; left:130px; width:100px; height:50px; border:1px solid blue; pointer-events:none; }
/* doesn't work in opera and ie */


.content { position:absolute; top:0; left:0; width:100%; height:100%; z-index:0;}
.content:hover { background:blue; }
person Litek    schedule 29.09.2012

arrow_upward
5
arrow_downward

Просто: не вставляйте свои #inner div внутрь. Небольшая демонстрация: маленькая ссылка. Обратите внимание, что я добавил:

html, body {
    position: relative;
}

Что необходимо в данном случае.

Редактировать: если вы настаиваете на его вложенности, потребуется немного JavaScript. Вот пример:

var inn = document.getElementById("inner"), outt = document.getElementById("holder");
outt.onmouseover = function() {
   this.style.backgroundColor = "rgb(0, 162, 232)"; /*I like this color :)*/
}
outt.onmouseout = function() {
   this.style.backgroundColor = "orange";
}
inn.onmouseover = function(ev) {
   ev.stopPropagation();
}

(Это было бы короче, если бы было написано с использованием jQuery, но идея та же).

Вот демонстрация: маленькая ссылка.

person Chris    schedule 29.09.2012
comment
Я не думаю, что это необходимо. - person BoltClock; 29.09.2012
comment
@BoltClock Ну, я пробовал без него; по-видимому, html и body не получают position: relative; по умолчанию. - person Chris; 29.09.2012
comment
Элемент должен быть вложен в его родителя - person CupOfTea696; 29.09.2012
comment
@CupOfTea696 Почему именно? Чего вы пытаетесь достичь? - person Chris; 29.09.2012
comment
@Abody97: Вот это странно. Они не получают его по умолчанию, но абсолютно позиционированный элемент все равно должен быть относительно области просмотра, если ни один из его предков не является относительным. - person BoltClock; 29.09.2012
comment
Вы знаете, @BoltClock html и body не всегда расширяются, чтобы заполнить область просмотра. В этом случае они становятся настолько большими, насколько это необходимо, чтобы соответствовать #holder. - person Chris; 29.09.2012
comment
@ Abody97: О, я понял - смещения вверх/влево/вниз/вправо отсутствуют, что может быть проблемой. Я никогда не понимал, как auto работает для этих свойств. - person BoltClock; 29.09.2012
comment
Да, я знаю, что могу решить это с помощью jQuery, но мне было интересно, есть ли решение только для CSS. - person CupOfTea696; 29.09.2012
comment
@CupOfTea696 Вероятно, нет. :hover состояния в CSS распространяются - нет реального способа предотвратить их. Хотя, я должен отметить, фрагмент в моем ответе не использует jQuery :) - person Chris; 29.09.2012
comment
Ну, вы могли бы добавить прозрачный элемент поверх дочернего элемента, но мне это кажется немного грязным. - person Ana; 29.09.2012

arrow_upward
1
arrow_downward

Вам нужно использовать немного JavaScript, чтобы событие не всплывало. Взгляните на этот пример:

css: hover влияет только на верхний div гнезда

person PRB    schedule 29.09.2012
comment
Да, но на самом деле мне было интересно, есть ли решение только для CSS. - person CupOfTea696; 29.09.2012