Question

菜单文字在悬停时变为斜体，但我意识到当一个项目变为斜体时，其他项目移动一点位置（可能是b / c他们想要保持它们之间的水平边距......？）

另一个问题是它在活动状态下不是斜体。

这是网站 https://bkwon0402.github.io/about.html 和代码。非常感谢帮助！

#nav a:hover {
font-style: italic;
}

#nav a:active {
font-style: italic;
}



}
.nav {
height:         58px;
margin:         0;
margin-left:    0px;
width:          100%;

}

.nav ul {
position:       absolute;
right:          0px;
height:         0px;
display:        block;
font-family:    "Adobe Garamond Pro"; 
list-style:     none;
margin:         0;
padding:        21px 40px;
color: #595959;

}

.nav li {
font-size:  19px;
float:      left;
color: #595959; 
margin-left:40px;
font-family:    "Adobe Garamond Pro";

}

Answer 1

其他物品正在移动，因为它们的宽度正在变化。斜体比常规字体小。如果你给.nav列表项宽度，这应该防止它们四处移动。

此外，您的字体系列和颜色是继承的属性，因此您不需要在css中再次定义它们。我还建议将它们显示为内联块，而不是浮动。

.nav li {
   font-size:  19px;
   margin-left:40px;
   width:75px;
   display:inline-block;
}

Answer 2

首先，我会确保您的<a:value>属性按以下顺序排列：

/* unvisited link */
a:link {

}

/* visited link */
a:visited {

}

/* mouse over link */
a:hover {
    color: red;
}

/* selected link */
a:active {

}

来源：＆＃34;悬停必须来自：链接和：访问（如果它们存在）在CSS定义中，以便有效！＆＃34; w3schools哈哈

导航菜单项在悬停时移动

2 个答案: