为什么只有我的水平滚动条隐藏而我的垂直滚动条却没有隐藏？

Question

我有这些CSS条目...

div { overflow: hidden; overflow-y: hidden; overflow-x: hidden;}
div:hover { overflow:visible; overflow-y: visible; overflow-x: visible;}

...希望垂直和水平滚动条仅在用户将鼠标移到矩形中时出现。但是以上仅适用于我的水平滚动条。

鼠标在矩形外部：隐藏水平滚动条，可见垂直

在san矩形内的鼠标：出现水平滚动条。

更新：我列表的html是：

<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>

更新：使用...

div { overflow: hidden; overflow-y: hidden; overflow-x: hidden; width:300px;height:200px; }
div:hover { overflow:scroll; overflow-y: scroll; overflow-x: scroll;}

没有为我工作。这是我的san矩形在鼠标悬停之前的样子：

同时出现水平和垂直滚动。这是我的san矩形在鼠标悬停时的样子：

滚动条停留但文本消失了！

Answer 1

对于滚动条，您需要使用不可见的滚动。可见显示内容，滚动启用滚动条。

div { overflow: hidden; overflow-y: hidden; overflow-x: hidden;

width:300px;height:200px;
}
div:hover { overflow:scroll; overflow-y: scroll; overflow-x: scroll;}

<div>
asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada 
asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada 
asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada 
asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada 
asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada 
asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada 
asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada 
asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada 
asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada 
asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada 
asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada 
asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada 
asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada 
asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada 
asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada 
asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada 
asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada asdsada 
</div>

Answer 2

如果使用Firefox，请使用{overflow: -moz-scrollbars-none; }；如果使用Chrome / Safari或更新的Opera，请使用::-webkit-scrollbar { width: 0 !important }。