0

Web サイトでメニューのスタイルを設定しようとしていますが、カラーリングとホバー効果にこだわっています。

以下のようになります (/user は、スクリーンショットを撮ったときのカーソルの場所です)。

スクリーンショット

変更する必要があるのは次のとおりです。

  • 第 2 レベルのアイテムにカーソルを合わせると、第 1 レベルが「デフォルト」になります (ホバー効果なし)

このメニューの私の CSS は次のとおりです。

#nav {
text-align: center;
font-size: 1.5em;
font-weight: 700;
letter-spacing: 1px;
}
#nav ul ul {
display: none;
}
#nav ul li:hover > ul {
display: block;
}
#nav ul {
display: inline-table;
list-style: none outside none;
padding: 0 10px;
position: relative;
}
#nav ul:after {
clear: both;
content: "";
display: block;
}
#nav ul li {
float: left;
background: none repeat scroll 0 0 #F5F5F5;
margin-right: 3px;
}
#nav ul li:hover {
background: none repeat scroll 0 0 #E32D40;
}
#nav ul li a {
color: #757575;
display: block;
padding: 10px;
text-decoration: none;
}
#nav ul li a:hover {
color: #FFFFFF;
}
#nav ul ul {
border-radius: 0 0 0 0;
padding: 0;
position: absolute;
top: 100%;
}
#nav ul ul li {
margin-top: 3px;
float: none;
position: relative;
color: #757575;
}
#nav ul ul li a {
color: #757575;
display: block;
padding: 10px;
text-decoration: none;
}
#nav ul ul li a:hover {
}
#nav ul ul ul {
left: 100%;
position: absolute;
top: 0;
}
4

1 に答える 1

0

cssだけで可能かどうかはわかりません。で 2 番目のレベルを表示していて、 で#nav ul li:hover > ul1 番目を強調表示しているため#nav ul li:hover、どちらも 2 番目のレベルの li hover で起動しています (CSS に親呼び出しはありません)。

jQueryを使用すると非常に簡単です：

$('#nav > ul > li > ul > li').hover(function () {
    $(this).parents('li').first().css('background', 'none');
});

ここをチェックしてください：http://jsfiddle.net/balintbako/EruTP/

于 2013-08-02T10:08:10.563 に答える