Here are the CSS entries I am using...
div { overflow: hidden; overflow-y: hidden; overflow-x: hidden;}
div:hover { overflow:visible; overflow-y: visible; overflow-x: visible;}
I expected the vertical and horizontal scroll bars to only appear when a user hovers over a rectangle. However, this is only working for the horizontal scroll bar.
When the mouse is outside the rectangle: horizontal scroll bar is hidden, vertical scroll bar is visible.
https://i.sstatic.net/eOOGp.png
When the mouse is inside the rectangle: the horizontal scroll bar appears.
https://i.sstatic.net/WoSor.png
Update: The HTML code for my list is:
<nav>
<ul>
<li><a href=...>blah blah blah</a></li>
<li><a href=...>blah blah blah</a></li>
<li><a href=...>blah blah blah</a></li>
...
</ul>
</nav>
Update: I tried using the following CSS...
div { overflow: hidden; overflow-y: hidden; overflow-x: hidden; width:300px;height:200px; }
div:hover { overflow:scroll; overflow-y: scroll; overflow-x: scroll;}
However, it did not work as expected. Here is how my rectangle looks before I hover over it:
https://i.sstatic.net/LSVl8.png
Both horizontal and vertical scroll bars appear. And here is how my rectangle looks on mouseover:
https://i.sstatic.net/Rmoet.png
The scroll bars remain but the text disappears!