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 中悬停时将子菜单下拉项向右移动?

html/css:鼠标悬停时通过链接增加字体大小的位置移动

为啥css做的二级导航,当鼠标停留在一级上时候,二级菜单正常显示。当鼠标移动到二级菜单,

使用css在悬停时展开下拉菜单

css下拉菜单悬停时延迟1秒