0

シンプルなナビリストがあります。アクティブなページの li アイテムの ID が「アクティブ」である典型的なセットアップ。アクティブなページをリンクとして保持し、下に実線の境界線を付けたいが、「アクティブな」ID のないアイテムに破線の境界線を付けたい。

アクティブなタグを破線のボーダーボトムで上書きせずにこれを達成するにはどうすればよいですか?

リストのコードは次のとおりです。

<div id="nav_bar">
  <ul id="nav_list">
    <li id="active"><a href="#">About</a></li>
    <li><a href="#">Design</a></li>
    <li><a href="#">Photography</a></li>
  </ul>
</div>

jsFiddle の例

4

1 に答える 1

1

枠線はそれぞれに既に適用されているので、 を使用してa、適用されていないもの:hoverのみを適用します。li#active:not()

変化する：

#nav_list li a:hover{
    border-bottom:1px dashed #666;
}

#active a{
    border-bottom:1px solid #666;
}

#nav_list li#active a:hover{
    border-bottom:1px dashed #666;
}

に：

li#active a{
    border-bottom:1px solid #666;
}

#nav_list > li:not(#active) a:hover{
    border-bottom:1px dashed #666;
}

デモ: http://jsfiddle.net/FaESR/1/

注:複数の のインスタンスを使用する予定がある場合は、必ずclassの代わりにを使用してください。id#activeid

ハッピーコーディング！

于 2013-07-05T17:22:11.177 に答える