我正在为网站创建一个导航栏,我希望当我将光标悬停在菜单元素上时,菜单元素会更改背景颜色。然而,颜色更改部分有效,如果我在将光标悬停在一个菜单元素上时仔细查看导航栏,我可以看到导航栏 (div) 和菜单元素 (a) 的高度不同。 (红色矩形不如橙色矩形高。)它只有 1 px 左右,但确实很烦人。我使用 20px 填充作为高度,但显然出了点问题,我确信有更好的方法可以让它工作。顺便说一下,我是网络开发和 CSS 的新手。
div {
background-color: orange;
padding: 20px;
}
a {
padding: 20px;
}
a:hover {
background-color: red;
}
<div>
<a href="">Menu 1</a>
<a href="">Menu 2</a>
</div>
最佳答案
你试过吗:
div {
background: orange;
}
a {
display: inline-block;
padding: 20px;
}
通过设置显示:inline-block;
在你的 <a>
,填充应按要求运行。
关于html - CSS 导航栏链接背景色悬停,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25980646/