本来只是想实现以下鼠标hover或点击实现导航条颜色滑动，于是想到能不能用伪类元素来实现颜色块滑动，好吧是我想多了，jquery不支持伪类元素的样式操作
.....
于是我还是只能多写一个盒子用来定位直接实现，用jquery就三行代码
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.5.1.js"></script>
<style>
* {
padding: 0;
margin: 0;
-webkit-user-select: none;
}
.nav {
50rem;
height: 5rem;
position: relative;
margin: 10rem auto;
background-color: aqua;
}
.nav ul {
display: flex;
align-items: center;
100%;
height: 4rem;
background-color: azure;
}
.nav ul li {
flex: 1;
line-height: 4rem;
text-align: center;
background-color: blueviolet;
list-style: none;
cursor: pointer;
}
.nav .activediv {
20%;
height: 1rem;
position: absolute;
left: 0rem;
background-color: red;
transition: all .5s;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>测试</li>
<li>测试</li>
<li>测试</li>
<li>测试</li>
<li>测试</li>
</ul>
<div class="activediv">
</div>
</div>
</body>
<script>
$(function () {
$("li").click(
function () {
let l_width = $(this).index() * 160;
$(".activediv").css("left", (l_width / 16) + "rem")
}
);
})
</script>
</html>