Question

我正在尝试将单独容器中的元素悬停转换为悬停触发器，但它无法正常工作。这是代码（下面有更多详细信息）：

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，则悬停按预期工作，并向上翻转箭头。但是，我需要在容器中保留“box”div，因为它应该位于红色“右”容器的左侧（我不知道为什么它还没有，尽管如果我把“部分留下”之后） HTML中的“section right”然后它被正确定位，但是无论它是否在容器中，悬停都不起作用。）

我也试过这些变化但没有成功：

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

Answer 1

您必须使用section:hover ~ right:after才能工作，因为~：

选择以<p>元素
开头的每个元素

W3Schools

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

Answer 2

我很确定你只用CSS就可以做到这一点。要选择父母的兄弟姐妹，你应该使用JS。

悬停效果对不同元素不起作用

2 个答案: