多元素css的多重悬停效果

Question

我正试图在我的班级onHover中悬停，并在span.box中添加显示效果，但是没有任何想法？

.onHover {
  display: block;
  width: 200px;
  height: 20px;
  background: green;
}
.onHover:hover + span.box {
  width: 300px;
  height: 20px;
  background: lightgray;
  margin: 10px 0;
}

<div class="onHover">
  <span class="box"></span>
  <span class="image"></span>
</div>

Answer 1

问题是您将其应用于inline元素。您需要为display设置span。此外，+用于选择兄弟姐妹，而不是孩子。将其删除或将其替换为>：

＆＃13;

＆＃13;

.onHover {
  display: block;
  width: 200px;
  height: 20px;
  background: green;
}
.onHover:hover span.box {
  width: 300px;
  height: 20px;
  background: lightgray;
  margin: 10px 0;
  display: inline-block;
}

＆＃13;

<div class="onHover">
  <span class="box"></span>
  <span class="image"></span>
</div>

＆＃13;

＆＃13;

＆＃13;

width和height只能为block和inline-block元素设置。

Answer 2

除了删除作为相邻兄弟选择器的+之外，此处span是一个孩子。

:hover无效，因为span显示为inline

.onHover {
  display: block;
  width: 200px;
  height: 20px;
  background: green;
}
.onHover:hover span.box {
  width: 300px;
  height: 20px;
  background: lightgray;
  margin: 10px 0;
  display:block
}

<div class="onHover">
  <span class="box"></span>
  <span class="image"></span>
</div>

Answer 3

像这样使用伪元素:hover

span.box: hover{width:300px; height:20px; background:lightgray; margin:10px 0;}