Question

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

在下一个示例中，我希望将鼠标悬停在more

上时显示h3

只有css才有可能吗？

参见示例：

＆＃13;

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

＆＃13;

<div class="alpha">
 <span class="more">Hello</span>
</div>

<div class="beta">
 <h3>Make hover</h3>
</div>

＆＃13;

Answer 1

您只能转到下一个兄弟（使用+）或任何下一个兄弟（使用~）。无法上传HTML树（到父级）。因此，如果您在HTML DOM（.beta之前.alpha）中切换位置，则可以将鼠标悬停在.beta上并转移到.alpha的子级。所以，请看这个例子：

＆＃13;

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

＆＃13;

<div class="beta">
  <h3>Make hover</h3>
</div>

<div class="alpha">
  <span class="more">Hello</span>
</div>

＆＃13;

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

1 个答案: