html 导航菜单项在悬停时移动

lmyy7pcs 于 2023-11-15 发布在其他

关注(0)|答案(2)|浏览(185)

菜单文本在悬停时变成斜体，但我意识到当一个项目变成斜体时，其他项目会移动一点位置（可能是B/C他们想保留它们之间的水平边距...？）
另一个问题是，它不是斜体的活动状态。将不胜感激的帮助！

#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";

型
}

Html

来源：https://stackoverflow.com/questions/41855768/nav-menu-item-moving-on-hover

2条答案

按热度按时间

cdmah0mi1#

其他项目正在移动，因为它们的宽度正在改变。斜体比常规字体小。如果你给予.nav列表项目一个宽度，这应该可以防止它们四处移动。
另外，你的font-family和color是继承的属性，所以你不需要在你的css中再次定义它们，我也建议将它们显示为inline-block而不是float。

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

字符串

赞(0）回复(0）举报 2023-11-15

i5desfxk2#

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

/* unvisited link */
a:link {
}
/* visited link */
a:visited {
}
/* mouse over link */
a:hover {
    color: red;
}
/* selected link */
a:active {
}

字符串
来源：“hover必须在CSS定义中的：link和：visited（如果它们存在的话）之后，才能有效！”w3schools哈哈

展开查看全部

赞(0）回复(0）举报 2023-11-15

我来回答

html 导航菜单项在悬停时移动

2条答案

相关问题

热门标签

最新问答