1

CSSの移行をスムーズに進めようとしていますが、最後に1つ問題があります。認めるのはかなり表面的なことですが、可能であれば「修正」したいと思います。Chrome、Firefox、IEで試しましたが、すべてのブラウザでこれを実行します。

私が操作している要素ULと要素は、ナビゲーションツールバーの一部です。LIツールバーは、次のURLの左上隅に表示されます：http： //fretfast.com/templates/clean/sample.php

、、、などlearnの展開可能なリストを持つ要素の1つにカーソルを合わせると、非常にスムーズに展開されることがわかります（もちろん、ブラウザーがCSS3トランジションをサポートしていると仮定します）。ただし、マウスを展開可能なリストから離すと、リストの上部にある周辺領域がすぐに消去されるため、後続のすべてのテキストがすぐに上に移動します。teachcommunity

たとえば、にカーソルを合わせると、、、、およびlearnのオプションを提供する拡張可能なメニューが表示されlessonsます。ただし、マウスを外してメニューを折りたたむと、最初のオプション（）がすぐに押し上げられ、ボタンのメインテキスト（）のすぐ下に表示されます。questionstipslessonslearn

これが私がナビゲーションバーに使用している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に変更すると、問題なく表示されるようです。そうでない場合は、ホバーされたプロパティではなく、ホバーされていないプロパティで line-height を 25px に設定する (つまり、固定にする) のがおそらく最善です。

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

ホバーに関連する問題を簡単にデバッグするにはどうすればよいですか??

Chrome インスペクターで、ホバーが定義されているアイテムを選択し、スタイルタブに移動して、要素の状態の切り替えを選択し、ホバーを確認します。これで、状態が永続的にホバーするように設定されました。プロパティをチェックしたりチェックを外したりして、どこに問題があるかを確認してください。

于 2013-03-03T17:48:22.580 に答える