Question

之前我问过一个关于如何在菜单项上显示悬停边框而不重新调整图像here的问题，其中一位成员给了我一个符合我想要的解决方案。但是最近我注意到我的导航栏中出现了一个小故障，当它悬停在菜单项上时会导致项目略微闪烁。除此之外，后续菜单项不显示内联，它似乎浮动在顶部。我试过了v-align="middle"，但它似乎没有用。当我使用Internet Explorer浏览时问题变得更糟。我想要实现的是Twitter的导航栏，当有人将鼠标悬停在菜单项上时，项目下方会出现边框。

以下是我的示例代码的JSFiddle文件。

谢谢

Answer 1

如果您想找到类似Twitter的导航栏，那么最好的方法是看看它们是如何做的？我这样做了:)在Twitter的导航栏中，转换是在height而不是border。显而易见地为borders和paddings设置动画可能会导致动画效果不佳，如您所见。

使用您自己的代码检查此最小示例构建：https://jsfiddle.net/yxmgehyt/4/

以下是我使用的相关CSS代码：

.nav{
    height: 50px;
    overflow: hidden;
}

.nav li{
    float: left;
}

.nav li a{
    height: 55px;
    border-bottom: 5px solid #6666CC;
    -moz-transition: all .15s ease-in;
    -o-transition: all .15s ease-in;
    -webkit-transition: all .15s ease-in;
    transition: all .15s ease-in;
}

.nav li a:hover{
    height: 50px;
}

注意：另一种可能的解决方案是使用伪选择器（:before和:after）。

Navbar CSS无法正确显示悬停功能和菜单项

1 个答案: