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

Question

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

可悲的是，我找不到解决这个问题的方法。

HTML 模板:http://projects.helpful.ninja/BlackzDesignz/Template_example/

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

导航栏相关的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。如果您删除它，它将得到解决