导航栏在悬停时将内容下推

时间:2016-03-24 20:20:03

标签: html css hover navbar

我的网站上的导航栏出现问题,尤其是<a>元素及其悬停状态。我在整个网站上使用box-sizing: border-box,并且<a>元素的边框在悬停时会生效。然而,问题在于,当它们悬停时,它们会以某种方式推动主要内容(高度增加约0.33像素)。 <a>元素的高度设置为44像素,但是当悬停时,它会以某种方式比此限制增加0.33像素,并将内容向下推。这有点难以解释,因此我创建了一个简短的视频,详细说明了我的问题,请在此处查看:https://youtu.be/iEyVXqoQV74

这是我的实时网站的链接:http:// arkelectronics.ca/ 请注意:修改后,此链接将来不会显示问题。

您可以在GitHub上的“pre_fix_stackoverflow”分支上查看我网站的所有文件(修复前):https://github.com/Twinbird24/ark_electronics/tree/pre_fix_stackoverflow

导航栏的HTML:

<nav>
    <ul>
        <li><a href="index.html">home</a></li>
        <li><a href="about.html">about</a></li>
        <li><a href="services.html">services</a></li>
        <li><a href="contact.html">contact</a></li>
    </ul>
</nav>

导航栏的关联CSS:

nav li a {
    height: 44px;
    color: white;
    padding: 0px 8px 0px 8px;
    text-decoration: none;
    background-color: transparent;
    border-bottom: 0px solid #ededed; /* will be animated-in on hover */
    border-top: 0px solid orange; /* will be animated-in on hover */
    transition: border 200ms; /* the transition is applies to the border only, at a speed of 200ms */
    display: table-cell; /* this, as well as the vertical-align, ensures text is vertically centered every time inside the nav buttons*/
    vertical-align: middle;
}

/* when nav button is hovered over */
nav li a:hover {
    border-bottom: 13px solid #ededed;
    border-top: 13px solid orange;
}

/* when the mouse is held down on nav button */
nav li a:active {
    border-bottom: 5px solid #ededed;
}

2 个答案:

答案 0 :(得分:0)

你的css第81行

将高度改为51像素                            nav li a {                         背景颜色:透明;                         border-bottom:0 solid #ededed;                         border-top:0纯橙色;                         白颜色;                         显示:table-cell;                         身高:51px;                         填充:0 8px;                         text-decoration:none;                         过渡:边界200ms缓和0s;                         vertical-align:middle;                     }

答案 1 :(得分:0)

像这样改变:

nav ul {
    list-style-type: none; /* removes the bullet-point that's common with ul elements */
    margin: 0;
    padding: 0; 
    overflow: hidden;
}

我在其上添加了overflow: hidden;属性,因为IE10上存在错误。

然后像这样:

nav li a {
    height: 45px;
    color: white;
    padding: 0px 8px 0px 8px;
    text-decoration: none;
    background-color: transparent;
    border-bottom: 0px solid #ededed; /* will be animated-in on hover */
    border-top: 0px solid orange; /* will be animated-in on hover */
    transition: border 200ms; /* the transition is applies to the border only, at a speed of 200ms */
    display: table-cell; /* this, as well as the vertical-align, ensures text is vertically centered every time inside the nav buttons*/
    vertical-align: middle;
}

我更改了height属性。现在适用于IE10,希望它对你有好处。