Question

我正在努力让我的CSS过渡顺利，但我有最后一个问题。我承认这是非常肤浅的，但如果可能的话，我想让它“固定”。我已经在Chrome，Firefox和IE中尝试过它，它可以在所有浏览器中实现。

我正在操作的UL和LI元素是导航工具栏的一部分。可以在以下URL的左上角看到工具栏： http://fretfast.com/templates/clean/sample.php

当您将鼠标悬停在其中一个包含展开式列表的元素上时，例如learn，teach或community，您会看到它展开得非常顺畅（假设您的浏览器）当然支持CSS3过渡）;但是，当您将鼠标从可扩展列表中移开时，列表顶部的边缘区域会立即被根除，这会使所有后续文本过快地移动。

例如，如果您将鼠标悬停在learn上，系统会显示一个可展开的菜单，其中包含lessons，questions和tips的选项。但是，当您将鼠标移开并且菜单折叠时，第一个选项（lessons）会立即向上推，使其位于按钮主文本（learn）的正下方。

这是我用于导航栏的CSS，但对于我的生活，我无法弄清楚为什么高度转换只能在一个方向上工作。

#topNav {
    list-style-type: none; height: 25px; padding: 0; margin: 0;
}
#topNav * { font-size: 15px; }
#topNav li {
    float: left; position: relative; z-index: 1; 
    padding: 0; line-height: 23px; background: none; repeat-x 0 0;
    padding-top: 2px;
}
#topNav li:hover {
    background-color: #C0C0C0; z-index: 2;
    padding-top: 0;
    border-top: 2px solid #59B4FF;
}
#topNav li a {
    display: block; padding: 0 15px; color: #000; text-decoration: none;
}
#topNav li a:hover { color: #222222; }
#topNav li ul {
    opacity: 0; position: absolute; left: 0; width: 8em; background: #C0C0C0; 
    list-style-type: none; padding: 0; margin: 0;
}
#topNav li:hover ul { opacity: 1; }
#topNav li ul li {
    float: none; position: static; height: 0; line-height: 0; background: none;
}
#topNav li:hover ul li {
    height: 25px; line-height: 25px;
}
#topNav li ul li a { background: #C0C0C0; }
#topNav li ul li a:hover {
    text-indent: 0.3em;
    background-color: #59B4FF;
}

#topNav li {
    transition: background-color 0.2s ease;
    -o-transition: background-color 0.2s ease;
    -moz-transition: background-color 0.2s ease;
    -webkit-transition: background-color 0.2s ease;
}
#topNav li a {
    transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
}
#topNav li ul {
    transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}
#topNav li ul li {
    transition: height 0.5s ease;
    -o-transition: height 0.5s ease;
    -moz-transition: height 0.5s ease;
    -webkit-transition: height 0.5s ease;
}
#topNav li ul li a {
    transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;

    transition: text-indent 0.1s linear;
    -o-transition: text-indent 0.1s linear;
    -moz-transition: text-indent 0.1s linear;
    -webkit-transition: text-indent 0.1s linear;
}

我不相信它与padding-top中的#topNav li规范有任何关系，因为我今天刚刚添加了边框突出显示效果，这个问题已经持续了很长时间那。非常感谢任何帮助。

Answer 1

导致该属性的属性是行高;更具体地说就是这个。

#topNav li:hover ul li {
    height: 25px; 
    line-height: 25px;
}

如果你看过渡，它只在高度上指定。您可以将转换更改为全部，它似乎显示正常。如果没有，可能最好的方法是在非悬停属性中将行高设置为25px而不是悬停（也就是说，使其固定）

#topNav li ul li {
    transition: all 0.5s ease;
}

如何轻松调试与悬停相关的问题？

在Chrome检查器中，选择定义悬停的项目，转到样式标签，选择切换元素状态并选中鼠标悬停。现在该州将永久悬停。只需检查并取消检查专业知识，看看你在哪里遇到问题。

CSS过渡 - UL / LI标签中的高度问题

1 个答案: