我有一个列表,其中包含圆形元素。它们的背景中有一个图像,悬停时另一个 div 应该作为覆盖层可见。到目前为止它可以工作,但是仍然有一个可见的边框,表明悬停的 div 没有完美地覆盖另一个圆形元素。
HTML:
<ul>
<li>
<div class="hover"></div>
</li>
<li>
<div class="hover"></div>
</li>
<li>
<div class="hover"></div>
</li>
</ul>
CSS:
ul {
margin: 0;
padding: 0;
list-style: none;
font-size: 0;
height: 140px;
}
li {
width: 140px;
height: 140px;
margin: 0;
padding: 0;
display: inline-block;
border-radius: 70px;
background: url(http://www.nationalflaggen.de/media/flags/flagge-thailand.gif);
}
.hover {
border-radius: 70px;
width: 140px;
height: 140px;
}
.hover:hover {
background-color: rgba(255,255,255,.9);
}
我添加了一个 fiddle ,因为我真的不知道如何使它们完美重叠。
感谢您的帮助。
更新了 fiddle : http://jsfiddle.net/pL9Aa/1
最佳答案
看起来像一个子像素问题 - 浏览器进行一系列数学运算来确定使用方形像素的曲线的平滑度。有时它不会按照您的预期呈现。
如果要保持透明,您可以简单地从 :hover 伪类中删除 border-radius 规则。
.hover {
width: 140px;
height: 140px;
}
如果它需要是圆形的,我会使用相同的元素覆盖您的图像,而不是嵌套元素,如下所示:
li:hover {
background: white;
}
关于css - 完美重叠的圆形 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23373853/