悬停时:元素移至当前div之后 [英] On hover :after element move to current div

问题描述

当我们将鼠标悬停在当前div上时，我想移动伪元素.在这里，我要在当前悬停的div之前垂直移动粉红色的div.谁能建议我如何实现此输出

I want to move pseudo-element when we hover on the current div. Here pink color div I want to move vertically in front of the currently hovered div. Can anyone suggest to me how can I achieve this output

$(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>

推荐答案

此解决方案是基于以下假设:您不需要移动完全相同的元素，只希望在悬停时显示它.我仍然不确定你到底想要什么.这是通过纯CSS完成的，不需要任何JS代码.

This solution is on the assumption that you don't need the exact same element to move and only interested in showing it on hover. I'm still not sure what you actually want. This is done with pure CSS without the need for any JS code.

.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元素中.

I also changed the pseudo-element height to 100% since it's now contained by the article element.

更新

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

This is another answer, followed by the question update.

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的方法.

There are other ways to reach this result. I've kept the CSS only approach.

这篇关于悬停时:元素移至当前div之后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！