Question

我在导航中添加了悬停效果，遗憾的是悬停也会影响其上的文字。如何在不影响文本位置的情况下将鼠标悬停在导航中？

我无法找到解决方法。

Html模板：http://projects.helpful.ninja/BlackzDesignz/Template_example/

CSS文件：http://projects.helpful.ninja/BlackzDesignz/Template_example/assets/css/style.css

与navbar相关的CSS代码：

ul{
    margin: 0px;
    padding: 0px;
}

li{
    list-style: none; 
}

.navbar_item{
    font-family: Calibri;
    font-size: 15px;
    color: #fff;
    text-align: center;
    width:10%;
}

.navbar_item:hover{
    color: #1a1a1a;
    cursor: pointer;
    background-image: url("../images/navbar_hover.png");
    background-repeat: repeat-x;
    font-weight: bold;
    margin-top: 3px;
}

#navbar_home{
    width: 100px;
    height: 40px;
    line-height: 40px;
    background-color: #ffed00;
    text-align: center;
    margin-left: 10px;
    font-family: Calibri;
    font-weight: bolder;
    font-size: 14px;
    color: #212121;
}

有没有人有想法？

Answer 1

你的问题在于这个css类，你应该删除

 margin-top: 3px; 

.navbar_item:hover{
 color: #1a1a1a;
 cursor: pointer;
 background-image: url("../images/navbar_hover.png");
 background-repeat: repeat-x;
 font-weight: bold;
! margin-top: 3px; ! //remove this line

}

现在每个悬停，它将使用3px保留文本。如果删除它将会解决

Answer 2

你应用了margin-top: 3px; in .navbar_item:hover，在悬停时将li按下3px，如果需要3px margin-top，则在正常状态下应用3px。在悬停/焦点/活动时，不要使用边距/填充中与正常状态不同的值。例如，如果您有.navbar-item {margin-top: 3px;}，并且如果您应用.navbar-item:hover {margin-top: 5px;}，则会闪烁文本或更改文本的位置。

CSS悬停没有文字边距/填充

2 个答案: