隱藏邊框半徑懸停溢出顏色

我有一個PHP搜索腳本，通過HTML來解析結果樣式。當其中一個結果懸停時，它會突出顯示爲藍色。結果顯示在裏面使用邊界半徑給它彎曲的邊緣。但是，當您將鼠標懸停在曲線頂部或底部的結果上時，藍色會溢出曲線。我該如何解決這個問題？隱藏邊框半徑懸停溢出顏色

我的HTML是：

<a href='{$row['url']}' class='result'> 
    <div class='title'>{$row['title']}</div> 
    <div class='url'>{$row['url']}</div> 
    <div class='desc'>{$row['description']}</div> 
</a>

我的CSS是：

#results{ 
    background:#fff; 
    filter:alpha(opacity=80); 
    opacity:0.8; 
    color:#000; 
    width:75%; 
    float:left; 
    border-radius:0 10px 10px 10px 
} 

.result{ 
    font:12px Verdana,Arial,Helvetica,sans-serif; 
    display:block; 
    padding:7px 
} 

.result:hover{ 
    background-color:#d5e2ff 
}

來源

2011-07-16 Cosmo Posmo

哪個瀏覽器是你看到這個問題來處理邊界半徑爲FF在？ – Chris

你在哪個瀏覽器上看到這個？ – pixelfreak

我似乎無法複製您的問題。你可以張貼截圖嗎？ – Chris

您正在對#results的邊界半徑，但您正在。結果添加背景色

我假設＃結果是一個包含呃。結果？

如果要將圓角bg應用於個人。結果，則將border-radius放在那裏。但是，如果你想要把它應用到整個容器，然後將背景顏色應用於#results

此外，您還需要通過添加-moz-border-radius:0 10px 10px 10px;

來源

2011-07-16 09:47:09 pixelfreak

取決於版本。自FF 4.0以來。這裏是[doc]（https://developer.mozilla.org/en/css/-moz-border-radius#Browser_compatibility） – pixelfreak

@Callum - 在JS小提琴中測試，將邊界半徑添加到'.result'而不是'＃結果'似乎解決了你的問題。看到這裏：http://jsfiddle.net/YBc7r/1/ –

@Callum - 我的錯誤，你需要它在#results和.result。 –

隱藏邊框半徑懸停溢出顏色

回答

相關問題