1

我试图让我的 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，因为我今天刚刚添加了边框突出显示效果，而这个问题已经持续了更长的时间。任何帮助是极大的赞赏。

4

1 回答 1

1

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

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

如果您查看过渡，则仅在高度上指定。您可以将过渡更改为all，它似乎显示正常。如果没有，最好的办法是在非悬停属性中将行高设置为 25px，而不是在悬停时（即，使其固定）

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

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

在 Chrome 检查器中，选择定义悬停的项目，转到样式选项卡，选择切换元素状态并检查悬停。现在状态设置为永久悬停。只需四处检查和取消检查属性，看看你哪里有问题。

于 2013-03-03T17:48:22.580 回答