不同元素的悬停效果不起作用[重复]答案

【问题标题】：Hover effect on different element not working [duplicate]不同元素的悬停效果不起作用[重复]
【发布时间】：2017-05-18 01:32:03
【问题描述】：

我正在尝试将悬停过渡放在单独容器中的元素上以悬停触发器，但它不起作用。这是代码（下面有更多详细信息）：

body,
html {
  margin: 0;
}
.section {
  width: 50vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: inline-block;
}
.left {
  background-color: #ecf0f1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.right {
  display: inline-block;
  position: relative;
  background-color: #e74c3c;
  float: right;
}
.right::after {
  content: '';
  display: block;
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 50px solid transparent;
  border-right: 40px solid #e74c3c;
  transition: all 500ms;
}
.box:hover ~ .right::after {
  top: 30%;
}
.box {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 0 auto;
  cursor: pointer;
  transition: all 300ms;
}
.box1 {
  background-color: #9b59b6;
  border-bottom: 8px solid #8e44ad;
  border-right: 8px solid #8e44ad;
}
.box2 {
  background-color: #3498db;
  border-bottom: 8px solid #2980b9;
  border-right: 8px solid #2980b9;
}
.box3 {
  background-color: #2ecc71;
  border-bottom: 8px solid #27ae60;
  border-right: 8px solid #27ae60;
}

<div class="section left">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>
<div class="section right"></div>

如果我拿走“左部分”容器 div，则悬停按预期工作并且箭头向上平移。但是，我需要将“盒子” div 保留在容器中，因为它应该位于红色“右”容器的左侧（我不确定为什么还没有，尽管如果我在之后放置“左部分” HTML中的“section right”然后它的位置正确，但是无论它是否在容器中，悬停都不起作用。）

我也尝试了这些变体，但没有成功：

.box:hover ~ .right:after {
.box:hover > .right:after {
.box:hover + .right:after {
.box:hover .right:after {
.box:hover.right:after {

【问题讨论】：

标签： html css hover pseudo-element pseudo-class

【解决方案1】：

你必须使用section:hover ~ right:after 来工作，因为~：

选择前面有 <p> 元素的每个元素

W3Schools

如果这对你不起作用，你必须使用 JavaScript/jQuery。

【讨论】：

【解决方案2】：

我很确定您不能仅使用 CSS 来做到这一点。要选择父母的兄弟姐妹，您应该使用 JS。

【讨论】：