溢出:在CSS中滚动

时间:2011-10-14 20:21:51

标签: css hover mouseover

我有一个我用“overflow:scroll”设置的元素,但它看起来很糟糕,因为滚动条会使页面混乱。有没有办法让滚动条仅在有人将鼠标悬停在元素上时显示?

4 个答案:

答案 0 :(得分:3)

是的!

将类添加到要滚动的区域,例如:

<div class="over">Content to scroll</div>

你的CSS看起来像这样:
    .over { overflow:hidden }
    .over:hover { overflow-y:scroll }

Here's a link to an example

答案 1 :(得分:2)

#element_id {
    overflow: hidden;
}

#element_id:hover {
    overflow: scroll;
}

如果您不关心ie6用户

,则有效

答案 2 :(得分:0)

#element { overflow: hidden; }
#element:hover { overflow: scroll; }

虽然:hover在IE 6中不起作用,但您还是要记住这一点。

如果你需要支持IE 6,你需要在元素上使用JavaScript和类来做这类事情。

答案 3 :(得分:0)

如果:hover伪类在所有浏览器中一致地工作,您可以这样做:

.my_thing
{
    overflow: visible;
}

.my_thing:hover
{
    overflow: auto;
}

您最好的方法是通过JavaScript设置班级。