html - 在 :hover 中取消设置 -webkit-scrollbar

Question

我正在使用隐藏滚动条的 css，直到我将鼠标悬停在它上面(在 Firefox 和 IE 上工作)

悬停之前它看起来像这样:

div#popular-service-container > div:first-child > div::-webkit-scrollbar { 
    /* Safari & Chrome */
    display: none;  
}


div#popular-service-container > div:first-child > div{
    overflow-y: auto; 
    overflow-x: hidden;

    /* IE */
    -ms-overflow-style: none; 
    /* Firefox */
    overflow: -moz-scrollbars-none; 

    height: calc(100% - 160px); 
    margin-top: 20px; 
    padding-bottom: 20px; 
    font-family: KarlaRegular,arial,sans-serif; 
    font-size: .9em; 
    text-align: left; 

    color: #4d4e50; 

}

div#popular-service-container > div:first-child > div:hover{
    -ms-overflow-style: scrollbar; 
    /* Firefox */
    overflow: scroll; 
}

在 IE/Firefox 中，当我将鼠标悬停在它上面时，它会显示这样的滚动条:

但是使用 Chrome 悬停的代码(下面的代码显示了我单独尝试过的选项):

div#popular-service-container > div:first-child > div:hover::-webkit-scrollbar { 
    /* Safari & Chrome */
    display: initial;   
    display: unset;
}

它留下一个空的滚动条，就像这个例子:

对缺少什么有什么想法吗？

Answer 1

我想这就是你想要实现的。

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

<div id="something">
  <ul>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
  </ul>
</div>