javascript实现动态侧边栏代码_javascript技巧
程序员文章站
2022-04-22 22:01:56
...
总的来说就是利用 鼠标悬停onmouseover 和 鼠标移除onmouseout 这两个时间来完成的。
侧边栏
#div1{
width:150px;
height:200px;
background:#999999;
position:absolute;
left:-150px;}
span{
width:20px;
height:70px;
line-height:23px;
background:#09C;
position:absolute;
right:-20px;
top:70px;}
无标题文档
侧边栏
首先是HTML 结构
复制代码 代码如下:
侧边栏
然后是css的样式：
复制代码 代码如下:
#div1{
width:150px;
height:200px;
background:#999999;
position:absolute;
left:-150px;}
span{
width:20px;
height:70px;
line-height:23px;
background:#09C;
position:absolute;
right:-20px;
top:70px;}
默认的样式 侧边栏是隐藏起来的如图：
当鼠标移入以后如图：
下面是完整代码：
复制代码 代码如下:
侧边栏