Question

这是我的代码，这是使用Wordpress PHP创建的导航栏。

没有悬停的导航栏：

当我悬停时，它不会跟随导航栏的形状。我希望它有圆角。请帮忙。

这应该是它的样子：

谢谢:)（忽略背景，只是一些随机动漫图片）

.site-nav {
    height: 50px;
    width: 960px;
    margin: 15px auto;
    color: white;
    background: rgb(72, 55, 35);
    background: rgba(72, 55, 35, .75);
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -webkit-box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.4);
    box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.4);
}
.site-nav ul {
    margin: 0;
    padding: 0;
}
.site-nav ul:before, .site-nav:after {
    content:"";
    display: table;
}
.site-nav ul:after {
    clear: both;
}
.site-nav ul {
    *zoom: 1;
}
.site-nav ul li {
    list-style: none;
    float: left;
    border-right: 1px solid gray;
    height: 50px;
}
.site-nav ul li a:link, .site-nav ul li a:visited {
    display: block;
    padding: 14px 18px;
    text-decoration: none;
    font-size: 17px;
}
.site-nav ul li a:hover {
    background:rgba(72, 55, 35, 0.4);
}

Answer 1

在：

.site-nav ul li a:hover{
     background:rgba(72,55,35,0.4);
}

您正在更改.site-nav ul li a代码的背景。

Answer 2

您还需要将半径添加到第一个菜单项。

.site-nav ul li:first-child 
{
    -webkit-border-radius: 15px 0 0 15px;
    -moz-border-radius: 15px 0 0 15px;   
    border-radius: 15px 0 0 15px;
}

将以上内容添加到css应该可以正常工作

编辑：如果它不能使用上述风格，请试试这个：

.site-nav ul li:first-child a 
{
    -webkit-border-radius: 15px 0 0 15px;
    -moz-border-radius: 15px 0 0 15px;   
    border-radius: 15px 0 0 15px;
}

.site-nav ul li:first-child a:hover
{
    -webkit-border-radius: 15px 0 0 15px;
    -moz-border-radius: 15px 0 0 15px;   
    border-radius: 15px 0 0 15px;
}

Answer 3

您可以通过在悬停时向元素添加border-radius来执行此操作。

<强> CSS：

更改

.site-nav ul li a:hover {
    background:rgba(72, 55, 35, 0.4);
}

到

.site-nav ul li a:hover {
    background:rgba(72, 55, 35, 0.4);
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

这对Home按钮完全适合（如果使用正确的边界半径量）。

如果你想为元素的所有角落添加圆角（不仅仅是上面的左上角和左下角），只需使用：

.site-nav ul li a:hover {
    background:rgba(72, 55, 35, 0.4);
    border-radius: 20px;
}

编辑：在查看导航栏时，只有第一个元素（例如Home按钮）需要此边框半径，其他按钮具有直角。您可以执行以下操作（而不是上述操作）仅在Home按钮上应用这些圆角：

.site-nav ul li:first-child a:hover {
    background:rgba(72, 55, 35, 0.4);
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

选择li:first-child时，只有列表中的第一个li元素会应用此CSS。

Answer 4

您需要在悬停的元素上设置边框半径以匹配父级。您只需在第一个菜单元素上使用此选项，并且只希望顶部和底部左侧应用半径。

以下应该可以解决问题：

.site-nav ul li a:first-child{
    -webkit-border-top-left-radius: 15px;
    -webkit-border-bottom-left-radius: 15px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-bottomleft: 15px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}

如何更改CSS悬停的背景颜色（特别是形状）？

4 个答案: