时间戳

首页 > 解决方案 > 元素后的垂直菜单在悬停时移动到下一个 li 并通过平滑过渡激活

javascript - 元素后的垂直菜单在悬停时移动到下一个 li 并通过平滑过渡激活

问题描述

我正在处理垂直导航菜单，我想添加悬停活动边框移动到下一个 li 并带有平滑动画。

nav {
  padding: 50px;
  text-align: center;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  font-size: 0px;
}

ul li {
  position: relative;
  display: inline-block;
  padding: 8px 0;
  width: 80px;
  text-align: center;
  font-size: 15px;
  cursor: pointer;
}

li:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 34px;
  width: 2px;
  background: red;
  transition: .5s linear;
}

li.active:after {
  left: -1px;
  width: 4px;
  background: green;
  transition: .5s linear;
}

li:nth-child(1):hover~li.active:after {
  top: 0px;
}

li:nth-child(2):hover~li.active:after {
  top: 80px;
}

li:nth-child(3):hover~li.active:after {
  top: 160px;
}

li:nth-child(4):hover~li.active:after {
  top: 240px;
}
<nav>
  <ul>
    <li>one</li>
    <li class="active">two</li>
    <li>three</li>
    <li>four</li>
  </ul>
</nav>

标签： javascripthtmljquerycsscss-transitions

解决方案

我希望这是你所期待的。

let addClass = (e) => {
  if (e.target.tagName === 'LI') {
    e.target.classList.add('active');
  }
}

let removeClass = (e) => {
  if (e.target.tagName === 'LI') {
    e.target.classList.remove('active');
  }
}


let list = document.querySelector('.list-elements');
list.addEventListener('mouseover', addClass);
list.addEventListener('mouseout', removeClass);
nav {
  padding: 50px;
  text-align: center;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  font-size: 0px;
}

ul li {
  position: relative;
  display: inline-block;
  padding: 8px 0;
  width: 80px;
  text-align: center;
  font-size: 15px;
  cursor: pointer;
}

li:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 34px;
  width: 2px;
  background: red;
  transition: .5s linear;
}

li.active::after {
  left: -1px;
  width: 4px;
  background: green;
  transition: .5s linear;
}
<nav>
  <ul class="list-elements">
    <li class="active">one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
  </ul>
</nav>

要进行平滑过渡，您必须添加另一个子元素div。

let addClass = (e) => {
  if (e.target.tagName === 'LI') {
    let top = e.target.classList[0];
    let div = document.querySelector('.list-elements div');
    div.style.top = `${parseInt(top)*35}px`;
  }
}
let list = document.querySelector('.list-elements');
list.addEventListener('mouseover', addClass);
nav {
  padding: 50px;
  text-align: center;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  font-size: 0px;
}

ul li {
  position: relative;
  display: inline-block;
  padding: 8px 0;
  width: 80px;
  text-align: center;
  font-size: 15px;
  cursor: pointer;
}

ul:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 2px;
  background: red;
  transition: .5s linear;
}

li.active::after {
  left: -1px;
  width: 4px;
  background: green;
}

ul div {
  position: absolute;
  top: 0px;
  width: 4px;
  left: -1px;
  background-color: green;
  height: 35px;
  z-index: 9;
  border-radius: 2px;
  transition: .5s linear;
}
<nav>
  <ul class="list-elements">
    <li class="0">one</li>
    <li class="1">two</li>
    <li class="2">three</li>
    <li class="3">four</li>
    <div></div>
  </ul>
</nav>

推荐阅读