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