隐藏边界半径悬停溢出颜色

Question

我有一个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
}

Answer 1

您正在对边界半径#results,但您要添加的背景色.结果

我认为#results是一个容器.结果？

如果您希望将圆角bg应用于单个.result,则将border-radius放在那里.但是如果您希望将它应用于整个容器,则将背景颜色应用于#results

此外,您需要通过添加来处理FF的border-radius -moz-border-radius:0 10px 10px 10px;