时间戳

首页 > 解决方案 > 影响横幅 div 的多个 div

html - 影响横幅 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;
}

...直到 square9...然后

.hover-container{
  pointer-events:none;
}

.hover-me, .square1, .square2, .square3, .square4, .square5, .square6, 
.square7, .square8, .square9{
  pointer-events:auto;
  cursor:pointer;
}

标签： htmlcss

解决方案

我试过你的代码，它似乎工作正常。也许这有帮助？

.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>

推荐阅读