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

您将border-radius放在 #results 上，但是您要在 .result上添加背景颜色

我认为 #results 是 .result 的容器？

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

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

来处理FF的border-radius

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

1 个答案: