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);
}

我添加了一个小提琴，因为我真的不知道如何使它们完全重叠。

感谢您的帮助。

更新了提问： http://jsfiddle.net/pL9Aa/1

Answer 1

看起来像一个子像素问题 - 浏览器会使用方形像素来确定曲线的平滑度。有时候它并没有呈现出你的期望。

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

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

Fiddle

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

li:hover {
    background: white;
}

Fiddle2

Answer 2

您可以添加：

li:hover {
    background:none;
}

确保李的背景消失。

虽然很奇怪 - 看起来像渲染错误。

假设您要在叠加层中包含文本或其他内容，值得注意的是将背景设置为略微透明（例如rgba（255,255,255,0.8））会使渲染错误不太明显。

Answer 3

只需更改#hover s border-radius: 62px;

即可

Answer 4

如果您的悬停仅用于覆盖元素，则无需在悬停元素上放置border-radius。只需删除该行即可解决您的问题：

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

http://jsfiddle.net/pL9Aa/3/

Answer 5

如果在生产环境中您实际上可以使用背景颜色，您还可以使用box-shadow

演示：http://jsfiddle.net/j4NFB/

.hover:hover {
    background-color: #FFF;
    box-shadow: 0 0 0 1px #fff;
}

完美重叠圆形div

5 个答案: