我有一个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
}
答案 0 :(得分:5)
您将border-radius放在 #results 上,但是您要在 .result上添加背景颜色
我认为 #results 是 .result 的容器?
如果您希望将圆角bg应用于单个 .result ,则将border-radius放在那里。但是,如果您希望将其应用于整个容器,请将背景颜色应用于 #results
此外,您需要通过添加-moz-border-radius:0 10px 10px 10px;