CSS：将鼠标悬停在 div 内的元素上，更改另一个 div 内的元素样式答案

【问题标题】：CSS: Hover on element inside div, change element style inside another divCSS：将鼠标悬停在 div 内的元素上，更改另一个 div 内的元素样式
【发布时间】：2017-03-16 21:51:32
【问题描述】：

我有两个 div。当将元素悬停在另一个 div 中时，我想更改 div 中的元素的样式。

在下一个示例中，我想在将鼠标悬停在 h3 上时显示 more

只有css才有可能？

查看示例：

.alpha {
 position:relative;
 background-color:red;
 width:100px;
 height:50px;
}

.alpha .more {
 position:absolute;
 top:40%;
 left:40%;
 display:none
}

.beta {}

.beta h3:hover + .alpha .more {
 display:block;
}

<div class="alpha">
 <span class="more">Hello</span>
</div>

<div class="beta">
 <h3>Make hover</h3>
</div>

【问题讨论】：

见stackoverflow.com/questions/4502633/…。
是的，我知道，但是元素在不同的 div 中
Unfortunately, not possible
我以为没有javascript是不可能的

标签： css

【解决方案1】：

您只能转到紧邻的下一个兄弟姐妹（+）或任何下一个兄弟姐妹（~）。不可能上到 HTML 树（到父级）。因此，如果您在 HTML DOM 中切换它们的位置（.alpha 之前的.beta），则可以从悬停在.beta 上转到.alpha 的子级。所以，看这个例子：

.alpha {
  position:relative;
  background-color:red;
  width:100px;
  height:50px;
}

.alpha .more {
  position:absolute;
  top:40%;
  left:40%;
  display:none
}

.beta {}

.beta:hover + .alpha .more {
  display:block;
}

<div class="beta">
  <h3>Make hover</h3>
</div>

<div class="alpha">
  <span class="more">Hello</span>
</div>

【讨论】：