我有一个指定高度的容器,里面的物品是堆叠的。默认情况下,我将溢出项设置为隐藏,一旦鼠标悬停,我启用容器以显示滚动条 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上发生。任何的想法?
答案 0 :(得分:2)
试试这段代码:
#container:hover .item{
width:auto;
}
.item {
margin-top:2px;
margin-bottom: 2px;
background-color: yellow;
width:200px;
}
您也可以使用100%
代替200px
。