在Chrome浏览器上通过滚动条删除CSS背景颜色

Question

我有一个具有指定高度的容器，并且其中的项目被堆叠。默认情况下，我将溢出项目设置为隐藏，并且一旦鼠标悬停，我启用容器显示滚动条。
的HTML

#container { 
 
    width: 200px; 
 
    background-color: gray; 
 
    height: 200px; 
 
    overflow-y: hidden; 
 
} 
 
#container:hover { 
 
    overflow-y: auto; 
 
} 
 
.item { 
 
    margin-top: 2px; 
 
    margin-bottom: 2px; 
 
    background-color: yellow; 
 
}

<div id="container"> 
 
    <div class="item">Item 1</div> 
 
    <div class="item">Item 2</div> 
 
    <div class="item">Item 3</div> 
 
    <div class="item">Item 4</div> 
 
    <div class="item">Item 5</div> 
 
    <div class="item">Item 6</div> 
 
    <div class="item">Item 7</div> 
 
    <div class="item">Item 8</div> 
 
    <div class="item">Item 9</div> 
 
    <div class="item">Item 10</div> 
 
</div>

它可以作为我希望除了在Chrome浏览器的鼠标移出容器和滚动条消失，滚动条区域的背景颜色被擦除之后。这仅在Chrome上发生。任何想法？

Demo

Answer 1

试试这个代码：

DEMO

#container:hover .item{ 
    width:auto; 
} 

.item { 
    margin-top:2px; 
    margin-bottom: 2px; 
    background-color: yellow; 
    width:200px; 
} 

可以使用100%代替200px了。