在:hover时取消设置-webkit-scrollbar [英] unset -webkit-scrollbar when in :hover

问题描述

我正在使用css来隐藏滚动条，直到将鼠标悬停在其上为止(在Firefox和IE上工作)

I'm using css that hides the scrollbars until I hover over it (Working on Firefox and IE)

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

Before the hover it lookes like this:

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中，当我将鼠标悬停在上面时，它会显示滚动条，如下所示:

and in IE/Firefox when I mouse over it shows the scrollbars like so:

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

But with the code for Chrome hover (The code below shows the options I have tried seperately):

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

它像示例一样留下一个空的滚动条:

it leaves an empty scrollbar like the example:

关于缺少什么的任何想法吗?

Any ideas on what is missing?

推荐答案

我认为这是您想要实现的.

I think this is what you want to achieve.

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>

这篇关于在:hover时取消设置-webkit-scrollbar的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！