多元素css的多重悬停效果[关闭]答案

【问题标题】：Multiple hover effect with multi element css [closed]多元素css的多重悬停效果[关闭]
【发布时间】：2016-10-02 13:29:12
【问题描述】：

我正在尝试将鼠标悬停在我的班级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>

【问题讨论】：

+ 是相邻的同级选择器，span 是一个孩子，而不是同级
您不需要+，因为它不是兄弟。请删除+：.onHover:hover span.box。将其作为拼写错误关闭！
@PraveenKumar 是对的。删除 +
@NenadVracar 没有 + 就无法工作！
@nevergiveup 然后显示您的完整代码。创建堆栈片段（按 Ctrl + M）。

标签： html css hover

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

像这样使用伪元素:hover

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

【讨论】：

您甚至使用过代码格式化吗？这无论如何都行不通。