首页 > Web开发 > 详细

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

时间:2019-08-18 19:09:51      阅读:82      评论:0      收藏:0      [点我收藏+]

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

 主要想法:在css中设定一个链接被点击效果的css样式,在用js监听,当有一个链接被点击时,该链接css样式改变,同时其兄弟节点的css样式也随之改变。

 

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

原文:https://www.cnblogs.com/Zxq-zn/p/11372732.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!