如何在父容器

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;
}

Answer 2

您是否正在寻找此https://jsfiddle.net/4ssxaqbp/3/

＆＃13;

＆＃13;

#outer-container
{
  width:200px;
  height:200px;
  background-color:blue; 
  position:relative;
  padding: 15px;
}

#container
{
  width:100%;
  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: -30px;
}

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%);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

请检查您的需求是否满意！

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

#container
{
  width:200px;
  min-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: -30px;
}

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%);
}

Answer 4

我最终自己制作了一个，它仍然有一些奇怪的

＆＃13;

＆＃13;

function whichTransitionEvent() {
  var t,
    el = document.createElement("fakeelement");

  var transitions = {
    "transition": "transitionend",
    "OTransition": "oTransitionEnd",
    "MozTransition": "transitionend",
    "WebkitTransition": "webkitTransitionEnd"
  }

  for (t in transitions) {
    if (el.style[t] !== undefined) {
      return transitions[t];
    }
  }
}

$(document).ready(function() {

  var conX = $("#container").position().left;
  var conWidth = $("#container").width() + parseInt($("#container").css('padding-left'), 10);
  var padleft = parseInt($("ul").css('padding-left'), 10);
  var arrowWidth = 10

  $("a").mouseenter(function() {
    if ($(this).css('position') == 'absolute') {
      //do nothing as its probably trying to revert back to relative
      return;
    }
    var myButton = $(this)
    var width = $(this).width();
    var x = $(this).position().left;

    var needToMove = ((conX + conWidth) - (x + width + arrowWidth))

    $(this).css("left", needToMove + "px")
    var transitionEvent = whichTransitionEvent();

    $(this).one(transitionEvent,
      function(event) {
        if (event.originalEvent.elapsedTime == 0.3) {
          $(this).addClass('notransition');
          $(this).css({
            top: $(this).offset().top + 'px',
            left: $(this).offset().left + 'px',
            width: $(this).width() + 'px',
            height: $(this).height() + 'px',
            position: 'absolute'
          });

          var ablock = $(this);
          //can't find the right trigger on after $(this).css finished applying
          setTimeout(function() {
            ablock.removeClass('notransition');
            ablock.css("left", padleft + conX + "px")
          }, 10);
        }
      });
  })

  $("a").mouseleave(function() {
    if ($(this).css('position') == 'absolute') {

      //moving back the absolute <a> to relative
      //transitioning absolute to left
      var width = $(this).width();

      var needToMove = ((conX + conWidth) - width - arrowWidth)
      $(this).css("left", needToMove + "px")
      var transitionEvent = whichTransitionEvent();
      $(this).one(transitionEvent,
        function(event) {
          $(this).addClass('notransition');
          var x = $(this).position().left;

          var needToMove = (conWidth - (padleft + width + arrowWidth))

          $(this).css({
            top: '0px',
            left: needToMove + 'px',
            width: $(this).width() + 'px',
            height: $(this).height() + 'px',
            position: 'relative'
          });
          //after 'finishing' converting back to relative move to right
          var ablock = $(this);
          setTimeout(function() {
            ablock.removeClass('notransition');
            ablock.css("left", "0px")
          }, 10);
        })


    } else {
      //if its still in relative state, just move it back
      $(this).css("left", 0)
    }

  })
});

＆＃13;

#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: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%);
}

.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

＆＃13;

＆＃13;

越野车问题 https://jsfiddle.net/extempest/4ssxaqbp/17/