Chrome浏览器上的滚动条会删除CSS背景颜色

时间:2013-11-26 08:13:49

标签: html css google-chrome scrollbar background-color

我有一个指定高度的容器,里面的物品是堆叠的。默认情况下,我将溢出项设置为隐藏,一旦鼠标悬停,我启用容器以显示滚动条 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

1 个答案:

答案 0 :(得分:2)

试试这段代码:

DEMO

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

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

您也可以使用100%代替200px