2

ナビゲーション メニューには、選択したセクションとホバー アクションに適用される下の境界線があります。

 <nav>
 <ul>
 <li><a href="#" id="selected">Home</a></li>
 <li><a href="#">Portfolio</a></li>
 <li><a href="#">Contact</a></li>
 <li><a href="#">About</a></li>
 </ul>
 </nav>

CSS:

 nav a:hover, #selected {
 border-bottom: 1px solid pink;
 }

私が望むのは、別のリスト項目にカーソルを合わせると #selected id から境界線が消えることです..次のようなものを試しました..

 nav a:hover ~ #selected {
 border-bottom: none;
 }

しかし、#selected をどこに置いても機能しません。代わりに + セレクターを使用しても。

下の境界線を x-index でホバーされたアイテムに移動させることができれば、さらに良いかもしれません..

4

4 に答える 4

3

~要素のように「いとこ」には拡張されません。<a>sのような直系の兄弟専用です<li>。

nav li:hover ~ li #selected {
    /* */
}

そして、それでも、従うのは兄弟だけです. したがって、 からは検索できますAboutがHome、その逆はできません。

<nav>ただし、または<ul>ホバリングされていることに反応できる場合があります。

nav a:hover,
#selected,
nav:hover #selected:hover /* override next selector and rule */ {
    border-bottom: 1px solid pink;
}

nav:hover #selected {
    border-bottom: none;
}

http://jsfiddle.net/6Eh8M/

于 2013-11-05T21:55:16.930 に答える
2

a兄弟ではなく、兄弟要素の子である要素をターゲットにしていましたli。

それとは別に、兄弟セレクターはその~前の要素を選択せず​​、後続の要素のみを選択します。

したがって、#selectedは の最初の子であるためul、選択されません。それどころか、#selected最後の要素だった場合、理論的には機能します。ただし、それで問題は解決しません。

目的の結果を得るには、 のborder-bottom上にカーソルを置いたときにを削除できますul。

ul:hover #selected {
    border-bottom:none;
}
#selected, a#selected:hover, a:hover {
    border-bottom:10px solid pink;
}

jsFiddle の例- これはあなたが望むもののようです -10px可視化のために追加されました。

于 2013-11-05T21:53:42.937 に答える
1

それぞれaが独自のli. したがって、 に#selectedは に一致する兄弟はありませんa。兄弟は同じ直接の親を共有します。あなたのアンカーはそうではありません。

于 2013-11-05T21:53:32.153 に答える
0

これが私のために働く実際の修正です：

→ jsフィドル

/* #selectd has a border by default */
li #selected {
    border-bottom: 1px solid pink;
}
/* but not link (not even #selected) does have a border on hovering */
ul:hover a, ul:hover a#selected {
    border: none;
}
/* all hovered links should have a border (incl. #selected) */
ul a:hover, ul a#selected:hover {
    border-bottom: 1px solid pink;
}

残念ながら、カーソルを の長方形に移動するとul、 の境界線も削除され#selectedます。JavaScript を使用すると、この問題を解決できる簡単な (唯一とは言えません) ソリューションになります。

于 2013-11-05T22:00:13.523 に答える