Несколько div, влияющих на div баннера
я хочу, чтобы мой баннер («затронутый») менялся всякий раз, когда я наводил курсор на другой div, каждый div будет отображать разные эффекты на моем баннере («затронутые»).
<div class = "hover-container">
this is the hover container
<div class = "hover-me">hover me</div>
<div class = "square1">hover me</div>
<div class = "square2">hover me</div>
<div class = "square3">hover me</div>
<div class = "square4">hover me</div>
<div class = "square5">hover me</div>
<div class = "square6">hover me</div>
<div class = "square7">hover me</div>
<div class = "square8">hover me</div>
<div class = "square9">hover me</div>
</div>
<div class = "affected">
affected
</div>
мой css
.hover-container:hover ~ .affected{
background:pink;
}
.square1:hover ~ .affected{
background:blue;
}
...до квадрата9... тогда
.hover-container{
pointer-events:none;
}
.hover-me, .square1, .square2, .square3, .square4, .square5, .square6,
.square7, .square8, .square9{
pointer-events:auto;
cursor:pointer;
}
когда я наводил курсор на Square8, баннер должен стать розовым, но это не так.
у меня отлично работает, но в коде, который вы предоставляете, отсутствует закрывающий тег div
В вашем .hover-container классе отсутствует окончание </div>. Если ваш класс .affected находится за пределами .hover-container, ваши селекторы братьев и сестер не будут работать должным образом, потому что квадраты не являются братьями и сестрами затронутых.
извините, я здесь новенький. у него есть конечный тег, но он здесь не указан, дайте мне отредактировать сообщение
.affected является только братом .hover-container, а не братом .square1 до 9, поэтому он всегда будет розовым, если вы переместите div.affected внутрь .hover-container, он будет работать
Ответы 1
Я попробовал ваш код, и он, кажется, работает правильно. Может быть, это помогает?
.square9:hover~.affected {
background: blue;
}
.square8:hover~.affected {
background: red;
}
.square8,
.square9 {
background: #eeeeee;
}
div {
float: left;
width: 100px;
height: 100px;
}
.hover-container {
width: 100%;
pointer-events: none;
}
.hover-me,
.square1,
.square2,
.square3,
.square4,
.square5,
.square6,
.square7,
.square8,
.square9 {
pointer-events: auto;
cursor: pointer;
}<div class = "hover-container">
<div class = "square8">hover me</div>
<div class = "square9">hover me</div>
<div class = "affected">
affected
</div>
</div>
что не работает с вашим кодом?