悬停时：元素移动到当前 div 之后

Question

当我们将鼠标悬停在当前 div 上时，我想移动伪元素。这里粉红色的 div 我想在当前悬停的 div 前面垂直移动。任何人都可以向我建议如何实现此输出

$(document).ready(function() {
  $(".timeline-entry").hover(function(e) {
    e.preventDefault();
    $('.timeline-entry.current').removeClass('current');
    $(this).addClass('current');
  });
});

.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
}

article {
  width: 100px;
  height: 50px;
  background: red;
}

.timeline-entry.right-aligned {
  align-self: flex-end;
  background: blue;
}

.timeline-entry.left-aligned {
  float: left;
}

.timeline:after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 20px;
  height: 50px;
  background: pink;
}


/* .timeline-entry:hover .timeline:nth-child(1) .timeline:after {
  top: 100px;
} */

.timeline-entry.current {
  background: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="timeline">
  <article class="timeline-entry right-aligned"></article>
  <article class="timeline-entry left-aligned"></article>
  <article class="timeline-entry right-aligned"></article>
  <article class="timeline-entry left-aligned"></article>
</div>

Answer 1

此解决方案假设您不需要完全相同的元素来移动并且只对悬停时显示它感兴趣。我仍然不确定你真正想要什么。这是用纯 CSS 完成的，不需要任何 JS 代码。

.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
}
article {
  width: 100px;
  height: 50px;
  background: red;
  position: relative;
}
.timeline-entry.right-aligned {
  align-self: flex-end;
  background: blue;
}
.timeline-entry.left-aligned {
  float: left;
}
.timeline-entry:hover {
  background: yellow;
}
.timeline-entry:hover:after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 20px;
  height: 100%;
  background: pink;
}

<div class="timeline">
  <article class="timeline-entry right-aligned"></article>
  <article class="timeline-entry left-aligned"></article>
  <article class="timeline-entry right-aligned"></article>
  <article class="timeline-entry left-aligned"></article>
</div>

我还将伪元素高度更改为 100%，因为它现在包含在文章元素中。

更新

这是另一个答案，然后是问题更新。

article {
  height: 50px;
  position: relative;
}
article div {
  width: 100px;
  height: 100%;
}
.timeline-entry.right-aligned div {
  float: right;
  background: blue;
}
.timeline-entry.left-aligned div {
  float: left;
  background: red;
}
.timeline-entry div:hover {
  background: yellow;
}
.timeline-entry div:hover::after {
  content: '';
  position: absolute;
  top: 0;
  left: calc(50% - 10px);
  width: 20px;
  height: 100%;
  background: pink;
}

<div class="timeline">
  <article class="timeline-entry right-aligned"><div></div></article>
  <article class="timeline-entry left-aligned"><div></div></article>
  <article class="timeline-entry right-aligned"><div></div></article>
  <article class="timeline-entry left-aligned"><div></div></article>
</div>

还有其他方法可以达到此结果。我保留了仅使用 CSS 的方法。