- 问题:鼠标移入移出显示鼠标移除隐藏,影响html布局?
<div class='div1'>
<div class='div2'>
<div>
<div>我是谁我在干什么</div>
<div>我是谁我在干什么</div>
<div>我是谁我在干什么</div>
<div>我是谁我在干什么</div>
<div>我是谁我在干什么</div>
<div>我是谁我在干什么</div>
<div>我是谁我在干什么</div>
<div>我是谁我在干什么</div>
<div>我是谁我在干什么</div>
<div>我是谁我在干什么</div>
<div>我是谁我在干什么</div>
<div>我是谁我在干什么</div>
<div>我是谁我在干什么</div>
<div>我是谁我在干什么</div>
<div>我是谁我在干什么</div>
<div>我是谁我在干什么</div>
<div>我是谁我在干什么</div>
<div>我是谁我在干什么</div>
</div>
</div>
</div>
1、首先先设置鼠标移入移出显示滚动条
.div2{
width:100px;
height:200px;
overflow-y:hidden;
overflow-x:hidden;
border:1px solid red;
padding-right:20px //防止滚动条遮盖内容
}
.div2:hover{
overflow-y:auto;
}
运行如下:可以看到布局变了
2、设置滚动区域外的【.div1】和滚动区域下的第一个div宽度相等占满滚动区域宽度
.div1,.div2 div{
width:100px;
}
运行如下:成功解决啦
到这里就可以解决css鼠标移入移出显示隐藏滚动条不影响布局的问题啦~