如何在悬停的 <li> 旁边制作线条幻灯片？

Question

这里我添加了伪class 到 li on hover 它的不透明度 1。当我悬停时 :after 正在褪色我怎样才能让它看起来像在直线上移动而不褪色。

ul {
  list-style-type: none;
}

li {
  padding: 30px;
  position: relative;
}

li:after {
  content: '';
  position: absolute;
  top: 0;
  width: 3px;
  height: 20px;
  background: red;
  opacity: 0;
  transition: all 700ms cubic-bezier(0.155, 0.930, 0.430, 0.990);
}

li:hover:after {
  opacity: 1;
  transform: translatey(30px);
}

<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

Answer 1

它需要 js 才能满足您的需求。你给的例子用的是jquery，我写的是纯js的版本

该行不是 li::after 而是父级的 ul::after，这样做是为了让我们可以获得 offsetTop 和 offsetHeight 并应用相对于父级的样式更改

let root = document.documentElement.style

function magicline(item) {
  root.setProperty('--navlinetop', `${item.offsetTop}px`)
  root.setProperty('--navlineheight', `${item.offsetHeight}px`)
}

function initiatelist() {
  let listItems = document.querySelectorAll('li')
  for (i = 0; i < listItems.length; i++) {
    listItems[i].addEventListener('mouseover', function(event) {
      magicline(event.target)
    })
  }
}

initiatelist()

:root {
  --navlinetop: 0px;
  --navlineheight: 0px;
}

ul {
  position: relative;
  padding: .5em;
  top: 0;
  width: 10ch;
  list-style-type: none;
  pointer-events: none;
}

li {
  pointer-events: auto;
  cursor: pointer;
}

ul:hover::after {
  position: absolute;
  display: block;
  content: '';
  right: -5px;
  top: var(--navlinetop);
  height: var(--navlineheight);
  width: 3px;
  background: #fa4;
  transition: top .3s, height .3s
}

<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

如何在悬停的 <li> 旁边制作线条幻灯片？

How to make a line slide beside a hovered <li>?

html

javascript

css

jquery

css-transitions