0

Web ページの左側のナビゲーション メニューを作成しようとしています。これは、次の画像のようになります。

これが私が直面している問題のjsfiddleです。http://jsfiddle.net/rzr4Z/

私のhtmlは次のようになります

<ul id="nav">
    <li><a href="#first-page" id="first_id">First</a><img src="images/navbar-icons/first.png" />
    </li>
    <li><a href="#second-page" id="second_id">Second</a><img src="images/navbar-icons/second.png" />
    </li>
    <li><a href="#third-page" id="third_id">Third</a><img src="images/navbar-icons/third.png" /> <img
        src="images/navbar-icons/third.png" />
        <ul id="side-menu">
            <li><img src="images/navbar-icons/submenu-img.png" alt="sub menu image" />
            </li>
            <li>Sub-menu item 1</li>
            <li>Sub-menu item 2</li>
            <li>Sub-menu item 1</li>
        </ul></li>
    <li><a href="fourth-page" id="fourth_id">Fourth</a><img src="images/navbar-icons/fourth.png" />
    </li>
</ul>

CSS:

ul#nav {
    list-style-type: none;
    margin: 10px 0;
    padding: 0;
    text-align: center;
}

ul#nav li {
    font-size: 250%;
    line-height: 25px;
    padding: 7px 0;
    margin: 0;
}

ul#nav li a {
    display: block;
}

ul#nav li a:link,ul#nav li a:visited {
    color: #333333;
    text-decoration: none;
}

ul#nav li a:hover,ul#nav li a:active {
    color: #a61607;
    text-decoration: none;
}

ul#nav li img {
    display: none;
}

ul#nav a:hover#first_id+img {
    display: block;
    position: relative;
    top: -25px;
}

ul#nav a:hover#second_id+img {
    display: block;
    position: relative;
    top: -25px;
}

ul#nav a:hover#third_id+img {
    display: block;
    position: relative;
    top: -25px;
}

ul#nav a:hover#fourth_id+img {
    display: block;
    position: relative;
    top: -25px;
}

ul#nav li ul#side-menu {
    display: none;
    position: absolute;
}

ul#nav li:hover ul#side-menu {
    font-size: 30%;
    list-style-type: none;
    line-height: 2px;
    color: #a61607;
    text-decoration: none;
    display: block;
    position: absolute;
    top: 310px;
    left: 250px;
}

ul#nav li:hover ul#side-menu li {
    float: none;
}

ul#nav li:hover ul#side-menu li img {
    position: absolute;
    top: 400px;
    left: 0px;
}

のようなことをする代わりに、

ul#nav a:hover+img {
    display: block;
    position: relative;
    top: -25px;
}

対応するロールオーバー位置に合わせて個別に調整できるように、各ロールオーバー画像のサイズと幅が異なるため、css の li 要素ごとに異なる ID を使用する必要がありました。メニュー項目ごとに異なる ID を使用することは、目的の効果を得る正しい方法ですか?

ただし、主な問題は、各メニュー項目の画像をホバーすると、フラッター効果が発生し始め、ホバー効果がそのようなフラッターで目に簡単に見えないことです. サブメニューの画像 (サブメニュー項目は表示されますが、画像は表示されません) も、#third-pageメニュー項目にカーソルを合わせても表示されません。

このバタつきを解決し、このメニューの正しい効果を得るための提案はありますか?

4

5 に答える 5

2

あなたの場合、異なるIDを使用しても問題ありません。フラッターの問題については、CSS の次の部分を変更することで解消できました。

ul#nav a:hover#first_id+img {
    display: block;
    position: relative;
    top: -25px;
}

ul#nav a:hover#second_id+img {
    display: block;
    position: relative;
    top: -25px;
}

ul#nav a:hover#third_id+img {
    display: block;
    position: relative;
    top: -25px;
}

ul#nav a:hover#fourth_id+img {
    display: block;
    position: relative;
    top: -25px;
}

これに：

ul#nav li:hover #first_id+img {
    display: block;
}

ul#nav li:hover #second_id+img {
    display: block;
}

ul#nav li:hover #third_id+img {
    display: block;
}

ul#nav li:hover #fourth_id+img {
    display: block;
}

何が起こっていたかというと、3 番目のリンクにカーソルを合わせると、画像のサイズによってリンクが押し出され、リンクが li の中央に配置されるということでした。また、画像が表示されたときにマウスがたまたまリンクの左または右にホバリングしていた場合、リンクの上にホバリングしていないため、リンクが消えてすぐに再表示されます。これは、再びリンクにホバリングしているためです..など

li 自体の上に :hover を検出すると、リンク、画像、またはそれらの周囲のスペースにカーソルを置いているかどうかに関係なく、li 自体の上にカーソルを置いている場合に画像が表示されるように修正されます。

お役に立てれば。

于 2012-08-06T18:50:58.133 に答える
2

問題を解決する秘訣は次の 2 つです。

1)LI項目を固定幅にする 2) 「ホバー」効果をLIではなく で発生させるA

「ちらつき」が発生している理由は、まさに上記のとおりです。:hoverタグに効果を適用していて、Aタグのサイズが固定されていない場合、マウスが を引き起こすいくつかの位置に巻き込まれ、それを引き起こしたオブジェクトがマウスの下から移動し、それが効果を引き起こし:hoverます:hover終了し、オブジェクトをマウスの下に戻します。これにより、再び発生します。ちらつきを与える無限の因果関係。

代わりにエフェクトを配置することで、マウスが上にあるかどうかに関係なく が発生します。その:hoverため、タグが表示されてすべてがサイズをシフトしても、マウスは両方の要素を含む上に移動したままです。ちらつく。LI:hoverAIMGIMGLI

ただし、画像のサイズが原因で、アプローチによって引き起こされる別の問題があります。画像が高さ (大きな画像) のために下に移動しているため、画像の一番下に到達して次の画像にロールオーバーすると、LIすべてがマウスの下からずれて、同様の問題が発生します。ただし、これは通常、ちらつき自体を引き起こすことはありません。

jsFiddle への次の更新を参照してください。

ご覧のとおり、「高さ」の問題は「3 番目」のエントリで発生します。これも、高さ/幅を明示的に設定し、正確なサイズの画像を使用することで解決できます。または、(より効果的に)タグbackground: url(...);ではなく CSS ルールを使用することで、クリップ/サイズ変更がはるかに簡単になるためです。IMG

サブメニューを含む他の CSS ベースのロールオーバー メニューの例が必要な場合は、この jsFiddleを参照してください。これは、ドロップダウン メニューなどに対するよりモジュール化されたアプローチを示しています。背景グラフィックを使用して、ニーズに合わせて非常に簡単に変更できます。

于 2012-08-09T17:10:10.147 に答える
0

Your code:

ul#nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
    position:absolute;
    max-height:300px;
    max-width:200px;
    border:5px solid red;
    overflow:hidden;
}

My code:

ul#nav {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
position:absolute;
height:300px;
width:200px;
max-height:300px;
max-width:200px;
border:5px solid red;
overflow:hidden;
}

Carefully look at my last answer, you have missed significant attributes like height:300px; and width:200px;

Simply specifying max,min-prefixed attributes is not enough, you should add specific height and width settings, only then fluttering disappears.

于 2012-08-08T18:22:23.647 に答える
0

次のいずれかを実行できます。

ul#nav li a{display: block;}

また

ul#nav li{text-align: left;}

だからmouseleave発火しないmouseenter

于 2012-08-09T09:11:42.330 に答える