overflow:scroll in css

I have an element that i've styled with "overflow:scroll", but it looks bad because the scroll bar clutters up the page. Is there any way to make the scroll bar only show when someone mouses over开发者_如何学运维 the element?

---

Yep!

Add a class to the area where you want to scroll, like:

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

Your CSS will look like this:
.over { overflow:hidden }
.over:hover { overflow-y:scroll }

Here's a link to an example.

---

#element_id {
    overflow: hidden;
}

#element_id:hover {
    overflow: scroll;
}

works if you don't care about ie6 users

---

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

Though :hover doesn't work in IE 6 so you'll want to keep that in mind.

If you need to support IE 6, you'll need to do this sort of thing with JavaScript and classes on the element.

---

If the :hover pseudo class worked consistently across all browsers, you could do:

.my_thing
{
    overflow: visible;
}

.my_thing:hover
{
    overflow: auto;
}

Your best best is to set the class on hover via JavaScript.