CSS 菜单在悬停时移动
Posted
技术标签:
【中文标题】CSS 菜单在悬停时移动【英文标题】:CSS menu moving on hover 【发布时间】:2013-06-21 19:56:26 【问题描述】:我认为我尝试的代码是适中的,但如果将鼠标悬停在菜单上,菜单会随着文本和背景一起移动。我尝试了几个在这里找到的代码,但没有任何改变。代码是 -
HTML:
<div class="nav">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>
CSS:
div.nav
float: right;
margin: 50px -120px;
div.nav ul
display: block;
width: 480px;
div.nav ul li
float: left;
padding: 0 10px;
list-style-type: none;
div.nav ul li a:link, div.nav ul li a:visited
color: #1E1E1C;
font-family: RockwellRegular,arial,helvetica,sans-serif;
font-weight: bold;
text-decoration: none;
div.nav ul li a:hover
background: #e41f4c;
border: 10px solid #e41f4c;
border-radius: 5px;
color: #fff;
还没有找到任何解决方案!
小提琴: http://jsfiddle.net/shuvo_nasir/T7Kud/
【问题讨论】:
【参考方案1】:这里有一个解决方案:http://jsfiddle.net/T7Kud/1/
将边框大小应用于a
标签并使边框颜色透明,悬停时只需更改边框颜色。
div.nav ul li a:link, div.nav ul li a:visited
color: #1E1E1C;
font-family: RockwellRegular,arial,helvetica,sans-serif;
font-weight: bold;
text-decoration: none;
border: 10px solid transparent;
border-radius: 5px;
div.nav ul li a:hover
background: #e41f4c;
border-color: #e41f4c;
color: #fff;
【讨论】:
你真棒!!!从昨晚开始,我试图解决这个问题,但是以你的方式编码它只需要几秒钟!谢谢阿贝尔。 @shuvonasir 欢迎您!很高兴能对你有所帮助。您可以选择我的答案作为未来参考的答案。【参考方案2】:试试这个示例http://jsfiddle.net/jaisonje/8fc3A/。我已经从 li 中删除了填充并在标签中添加了填充,因为如果有填充,这是添加悬停的正确方法。
HTML:
<div class="nav">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>
CSS:
div.nav
float: right;
margin: 50px -120px;
div.nav ul
display: block;
width: 480px;
div.nav ul li
float: left;
list-style-type: none;
div.nav ul li a:link, div.nav ul li a:visited
color: #1E1E1C;
font-family: RockwellRegular,arial,helvetica,sans-serif;
font-weight: bold;
text-decoration: none;
border-radius: 5px;
padding: 5px 10px;
div.nav ul li a:hover
background-color: #e41f4c;
color: #fff;
【讨论】:
【参考方案3】:试试这个:
div.nav
float: right;
margin: 50px -120px;
div.nav ul
display: block;
width: 480px;
div.nav ul li
float: left;
list-style-type: none;
div.nav ul li a
padding: 10px 10px;
div.nav ul li a:link, div.nav ul li a:visited
color: #1E1E1C;
font-family: RockwellRegular,arial,helvetica,sans-serif;
font-weight: bold;
text-decoration: none;
div.nav ul li a:hover
background: #e41f4c;
/* border: 10px solid #e41f4c;*/
border-radius: 5px;
color: #fff;
FIDDLE
【讨论】:
【参考方案4】:链接悬停有边框,但正常状态下没有。这会改变宽度和高度。 我建议在链接正常状态下使用页面背景的边框颜色设置边框,使其不可见,例如:
div.nav ul li a:link, div.nav ul li a:visited
color: #1E1E1C;
font-family: RockwellRegular,arial,helvetica,sans-serif;
font-weight: bold;
text-decoration: none;
border: 10px solid #ffffff;
【讨论】:
【参考方案5】:指定 li 元素的宽度 它会解决你的问题。 您增加了边框,这反过来又增加了 li 元素的大小
div.nav ul li
float: left;
padding: 0 10px;
list-style-type: none;
宽度:100 像素;
http://jsfiddle.net/T7Kud/4/
【讨论】:
以上是关于CSS 菜单在悬停时移动的主要内容,如果未能解决你的问题,请参考以下文章
出于用户体验的目的,如何使 CSS 菜单的悬停状态水平移动?
如何在 Bootstrap 4.1 中悬停时将子菜单下拉项向右移动?