css - 完美重叠的圆形 div

Question

我有一个包含圆形元素的列表。他们在背景中有一个图像，并且在悬停时另一个 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

Answer 1

看起来像是一个子像素问题——浏览器会进行大量数学运算来确定使用方形像素的曲线的平滑度。有时它不会按照您的预期呈现。

如果要保持透明，可以简单地从 :hover 伪类中删除 border-radius 规则。

.hover {
    width: 140px;
    height: 140px;
}

Fiddle

如果它需要是圆形的，我会使用相同的元素而不是嵌套元素来覆盖您的图像，如下所示:

li:hover {
    background: white;
}

Fiddle2