Question

http://jsfiddle.net/QsCNc/

#nav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: #1A1E2E;
border-bottom: 1px solid #ccc; 
height: 15%;
display: inline;
position: fixed;
z-index: 2;
}

#nav ul {
list-style: none;
width: 100%;
margin: 0 auto;
padding: 0; 
display: inline;
}

#nav li {
float: right; 
display: inline;
position: relative;
right: 20%;
top: 49%;
}

#nav li a {
display: block;
padding: 50px 15px;
text-decoration: none;
font-weight: bold;
color: white;
height: 50px;
/* animation */
z-index: 2;
position: relative;
transition: color 1s;
}

#nav li a:hover {
color: #c00;
}

#nav li a:before {
color: #C00;
background-color: #FFF;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
display: block;
width: 100%;
height: 100%;
content: " ";
position: absolute;
top: -250px;
left: 0;
transition: top 1s;
z-index: -1;
border-bottom: 1px solid #F0F0F0;
border-left: 1px solid #F0F0F0;
border-right: 1px solid #F0F0F0;
border-top: 1px solid #C00;
}

#nav li a:hover:before {
top: -70px;
}

以上是我网站代码的链接。最好是全窗口查看，所以这里是指向实际网站的链接：http://adamshort.site50.net

我遇到了有关导航的问题。当您将鼠标悬停在它们上方时，会播放一个很好的动画。但是，您可以将标签悬停在标签下方，动画仍然可以播放。我无法弄清楚如何保持动画的方式，但不能在它下面激活它，显然这有点奇怪。

我已经尝试更改我的填充，高度等，但这会改变下降的白色标签的长度，我不希望这样。

Answer 1

您的菜单锚点上有50px的填充，高度为50px，锚点本身不需要这两种填充。

试试这个：

http://jsfiddle.net/isherwood/QsCNc/4

#nav li a {
    padding: 50px 15px 0;
    height: 20px;
}
#nav li a:hover:before {
    height: 220%;
}
#nav li a:before {
    transition: all 1s;
}

调整以适应。

Answer 2

 #nav li a {
     ...
     padding: 50px 15px;
     height:50px;
     ...

您将a元素的高度设置为50px。显然整个50像素将在悬停时启动动画。移除高度。

其次，填充包含在任何悬停事件中。保证金不是。将padding更改为margin，您应该很高兴。

或者，从a元素中删除填充并将其添加到#nav li。

CSS动画导致与高度和填充有关的一些问题

2 个答案: