完全重疊的圓形格

我有一個包含圓形元素的列表。他們在後臺有一張圖片，並且在另一個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： http://jsfiddle.net/pL9Aa/1

來源

2014-04-29 paelzer

只是使覆蓋div大於下墊div –

或隱藏懸停的下墊。 –

我編輯了我的帖子。由於疊加層是透明的，因此底層圖像必須可見。 – paelzer

您可以添加：

li:hover { 
    background:none; 
}

，以確保在李後臺走了。

雖然很奇怪 - 看起來像一個渲染錯誤。

假設您要在疊加層中包含文本或其他內容，值得注意的是將背景設置爲稍微透明（例如rgba（255,255,255,0.8））會使渲染錯誤不太明顯。

來源

2014-04-29 19:49:28

對不起，我沒有說清楚，背景需要可見，因爲覆蓋div是透明的 – paelzer

看起來像一個子像素問題 - 瀏覽器用一串數學來確定使用正方形像素的曲線的平滑度。有時它並不能表達你的期望。

如果您保持透明，您可以簡單地從：hover僞類刪除邊界半徑規則。

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

Fiddle

如果它需要是圓的，我會使用相同的元素來覆蓋你的形象，而不是一個嵌套元素，像這樣：

li:hover { 
    background: white; 
}

Fiddle2

來源

2014-04-29 19:49:50 dezman

它需要是圓形的 – paelzer

爲保持輪廓而增加的住宿。 – dezman

我忘了說清楚圖像需要可見，因爲覆蓋圖是透明的。對於那個很抱歉。 – paelzer

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

來源

2014-04-29 19:51:18 Shakesy

這沒有任何意義，對不起 – paelzer

在您的CSS更改邊界半徑從70到62，簡單 – Shakesy

但是，它不是完全圓了。 – paelzer

如果您的懸停僅用於覆蓋元素，則不需要在懸停元素上放置邊框半徑。簡單地刪除該行能夠解決您的問題：

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

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

來源

2014-04-29 19:51:51

它應該是透明的，因此它需要是圓的，因爲一切的背景都是圖像。 – paelzer

如果在生產envirionment可以實際使用的背景顏色，你也可以使用一個box-shadow

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

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

來源

2014-04-29 19:53:42

它接近但仍不完美 – paelzer

您可以繼續增加1px部分的大小。唯一的問題是如果你實際使用覆蓋而不是顏色的背景圖像。 –

如果增加它，它將仍然顯示底層圖像結束的邊界。我想沒有辦法做到這一點。 – paelzer

完全重疊的圓形格

回答

相關問題