pre:hover

Explorer doesn't support :hover, so it wouldn't support the effect anyway.

The results of a little experiment with pre:hover.

In this site I use a lot of pre elements for displaying code examples. Some lines of code are longer than the browser window is wide. To avoid ugly horizontal page scrollbars I added

pre {
	overflow: auto;
}

to the general style sheet. It causes scrollbars to appear on each pre that needs them. Explorer on Mac barfed majorly on this code; you can study that little horror story if you like such matters.

:hover

Anyway, I decided to experiment with removing the scrollbars when the user mouses over the pre. The point is supposed to be that the user can now scan the entire code at once, instead of having to scroll.

This pre contains an extremely long line of code. In fact, it would go right off the browser window's right side if I hadn't added pre {overflow: auto;} to the general style sheet.

How did the various browsers react?

Mozilla: yep

The effect works in Mozilla 1.6. It has some trouble with the bottom margin (probably because the scrollbar height is not included in the height of the element), but otherwise it does what I want it to do. It was enough to decide the effect wouldn't really enhance my site.

Opera: no

Opera 7.50 supports both :hover and overflow: visible, but in this particular case it does nothing.

Safari: wow!

Safari 1.2 acts weirdly. It correctly hides the scrollbar onmouseover, but it doesn't create a page scrollbar. Worse: selecting the text in the pre only gives you the bits that were already visible when the scrollbar still existed.

For good measure, it hides the entire pre onmouseout.