用css和js实现侧边菜单栏点击和鼠标滑动特效

1点击效果：

2关键代码：

css:

#div{
  display:inline-block;
  width:100px;
  height:150px;
  border-radius: 5px;
  blackground-color:#fdfcf8;
}
#ul{
  list-style: none;
  padding:0px;
  margin:0px;
}
#ul li{
  display:block;
  height:30px;
  text-align:center;
}
#ul li a{
  display:block;
  text-decoration: none;
  text-align: center;
  color:black;
}
#ul li a:visited,#ul li a:hover{
  background-color:darkgray;
}
.a_Onclick{
  border-left-style: solid;
  border-left-color:red;
  border-left-width:5px;
}

js:

var a = document.getElementsByTagName("a");
for(let i=0;i<a.length;i++){
  a[i].onclick=function(){
    for(let j=0;j<a.length;j++){
      if(i==j){
        a[i].className="a_Onclick";
      }else{
        a[j].className="";
      }
    }
    }
  }

View js