Question

工作解决方案：

原始问题：

我正在尝试创建类似于BBC网站上的菜单悬停效果：

http://www.bbc.co.uk/

顶部菜单在链接底部创建一条线悬停在上面。我正在尝试做类似的事情，但我想排在最前面。

我创建了以下示例，以显示我遇到的问题：

<a href="#" class="menu_link">link 1</a>
<a href="#" class="menu_link">link 2</a>
<a href="#" class="menu_link">link 3</a>

a.menu_link{
    height:50px;
    display:block;
    float:left;
    margin-right:10px;
    padding:0px 5px 0px 5px;
}

a.menu_link:hover{
    border-top:5px solid black;
    padding-top:5px;
}

当鼠标悬停在我的示例链接上时，该行会将链接向下推。我不希望这种情况发生，我无法弄清楚如何阻止它发生。

有什么建议吗？

Answer 1

始终保持边界。只是改变它的颜色。（如果您无法匹配纯色，请从transparent开始）。

Answer 2

将此添加到menu_link默认css

border-top: 5px solid transparent;

所以它最终会像这样;

a.menu_link{
    height:50px;
    display:block;
    float:left;
    margin-right:10px;
    padding:0px 5px 0px 5px;
    border-top: 5px solid transparent;
}

如果您想保留填充，可以将box-sizing设置为border-box，但请注意，这是css3，不适用于旧浏览器

    a.menu_link{
        height:50px;
        display:block;
        float:left;
        margin-right:10px;
        padding:0px 5px 0px 5px;
        border-top: 5px solid transparent;

        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
    }

Answer 3

在悬停前匹配顶部元素（填充和边框）：

a.menu_link{
    height:50px;
    display:block;
    float:left;
    margin-right:10px;
    padding:5px 5px 0px 5px;
    border-top: 5px solid transparent;
}

http://jsfiddle.net/DPNLq/2/

Answer 4

工作示例 - http://jsfiddle.net/DPNLq/4/

.menu_link{
    height:50px;
    display:block;
    float:left;
    margin-right:10px;
    padding:10px 5px 0px 5px; 
}

a.menu_link:hover{
    border-top:5px solid black;
    padding-top:5px;
}

BBC风格菜单悬停效果

4 个答案: