Со следующим HTML, когда я нависаю над ребенком, я получаю зеленый фон на родителе. Как я могу мешать этому произойти? Я действительно хочу зеленый фон, если я толплюсь за пределами дочернего элемента.
CSS3 прекрасен.
.parent {
padding: 100px;
width: 400px;
height: 400px;
}
.parent:hover {
background-color: green;
}
.child {
padding: 100px;
width: 200px;
height: 200px;
}
.child:hover {
background-color: blue;
}
<div class="parent">
<div class="child">Child</div>
</div>
Так что это ДЕЙСТВИТЕЛЬНО некрасиво, но работает (вроде как). Я в основном создаю дубликат родителя как родного брата ребенка. родительская перезапись по умолчанию скрыта, а затем отображается при наведении курсора на дочерний элемент. Chrome не любит это, если вы не используете селектор + вместо селектора ~. Это не очень масштабируемо, но может работать.
Как писали другие ребята, javascript, вероятно, будет лучшим решением.
<стиль> .parent {отступ: 100 пикселей; ширина: 400 пикселей; высота: 400 пикселей; положение: относительное; z-индекс: 998; } .parent: hover {цвет фона: зеленый; }.ребенок {отступ: 100 пикселей; ширина: 200 пикселей; высота: 200 пикселей; положение: относительное; z-индекс: 1000; } .child: hover {цвет фона: синий; } .parent-overwrite {дополнение: наследовать; ширина: наследовать; рост: наследовать; позиция: абсолютная; верх: 0; слева: 0; z-индекс: 999; цвет фона: #FFF; дисплей: нет; } .child: hover ~ .parent-overwrite {display: block; } Дочерний
Я могу сделать это только с добавлением дополнительной разметки. Необходимо добавить пустой div, который по сути функционирует как родительский фон. Взгляните на CSS здесь.
Часть HTML :
<div class="parent">
Parent
<div class="child">
Child
<div class="grandson">
Grandson
<div class="grandson-bg"></div>
</div>
<div class="child-bg"></div>
</div>
<div class="parent-bg"></div>
</div>
Часть CSS :
article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }
.parent { display: block; position: relative; z-index: 0;
height: auto; width: auto; padding: 25px;
}
.parent-bg { display: block; height: 100%; width: 100%;
position: absolute; top: 0px; left: 0px;
border: 1px solid white; z-index: 0;
}
.parent-bg:hover { border: 1px solid red; }
.child { display: block; position: relative; z-index: 1;
height: auto; width: auto; padding: 25px;
}
.child-bg { display: block; height: 100%; width: 100%;
position: absolute; top: 0px; left: 0px;
border: 1px solid white; z-index: 0;
}
.child-bg:hover { border: 1px solid red; }
.grandson { display: block; position: relative; z-index: 2;
height: auto; width: auto; padding: 25px;
}
.grandson-bg { display: block; height: 100%; width: 100%;
position: absolute; top: 0px; left: 0px;
border: 1px solid white; z-index: 0;
}
.grandson-bg:hover { border: 1px solid red; }
Самым простым может быть использовать JS для такого рода CSS. Может быть, вы можете попытаться переосмыслить свою реализацию. Почему вы пытаетесь сделать что-то подобное?
Это невозможно при использовании обычного CSS. Вы запрашиваете псевдокласс дочернего элемента ( child: hover
), чтобы воздействовать на объявление background
родителя. Невозможно указать такие вещи с помощью обычного CSS.
Это определенно можно сделать с помощью javascript.