javascript - 你如何让子div重叠在父容器的顶部

Question

我正在尝试制作一个 html li 以向左滑动动画并向右滑动，但它会重叠在其父 div 容器的顶部。

现在，我正忙于制作向左滑动的动画。

https://jsfiddle.net/4ssxaqbp/

#outer-container
{
  width:200px;
  height:200px;
  background-color:blue;  
}

#container
{
  width:100px;
  height:200px;
  background-color:green;
  overflow-y:scroll;
}
a{
  left: 0px;
  position: relative;
  background-color:red;
  transition:all 0.3s ease-in-out;
}

a:hover {
  margin-left: -50px;
}

a:after, a:before{
    content:"";
    position:absolute;
    width:10px;
    height:50%;
    left:100%;
}
a:after{
    bottom:0;
    background: linear-gradient(to right bottom, red 50%, transparent 50%);
}
a:before{
      top:0;
    background: linear-gradient(to right top, red 50%, transparent 50%);
}

<div id="outer-container">
<div id="container">
   <ul>
   <li><a>adfsafas11111d</a></li>
   <li><a>adfsafas11111d</a></li>
   <li><a>adfsafas11111d</a></li>
   <li><a>adfsafas11111d</a></li>
   <li><a>adfsafas11111d</a></li>
   <li><a>adfsafas1111111111d</a></li>
   <li><a>adfsafas11111111d</a></li>
   <li><a>adfsafasd</a></li>
   <li><a>adfsafasd</a></li>
   <li><a>adfsafasd</a></li>
   <li><a>adfsafasd</a></li>
   <li><a>adfsafasd</a></li>
   <li><a>adfsafasd</a></li>
   <li><a>adfsafasd</a></li>
   <li><a>adfsafasd</a></li>
   <li><a>adfsafasd</a></li>

   </ul>
</div>
</div>

首选纯 html 和 css，但我的直觉是这是不可能的，需要 javascript。如果它使用的是 js，我猜它需要将 a 标签的位置更改为绝对位置，但我不确定。有没有人可以帮忙？

Answer 1

文本使用 margin-left 向左滑动，因此您需要对其进行调整

a:hover {
  margin-left: -35px;
}