0

アクティブなliアイテムにカーソルを合わせると問題が発生します。

現在のクラスはホバーと同じである必要があります。どこが間違っているのかわかりません。

ありがとう

4

2 に答える 2

1

次の変更を提案します。

  1. ではなく、アクティブ<li> に<a>します。
  2. :hoverとルールを組み合わせて、.activeメンテナンスを容易にします。
  3. 通常の状態とアクティブ/ホバー状態で異なるパディングを使用しないでください。

デモ： http： //jsfiddle.net/LVLKW/11/

HTML

<div id="nav">
    <ul>
        <li class="current"><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
    </ul>
</div>​

CSS

body {
    background-color: lightblue;
}
#nav ul{
    margin-top: 23px;
    list-style: none;
}
#nav ul li{
    font-size: 17px;
    padding: 10px 11px 7px 11px;
    font-weight: bold;
    font-family: HelNue;
    display: inline;
}
#nav ul li.current,
#nav ul li:hover{
    font-family: HelNue;
    background-color: white;
    margin: 0;
    color: #58585a;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
#nav ul li:hover a{
    color: #58585a;
}

#nav ul li a{
    color: black;
}​
于 2012-08-09T11:08:59.607 に答える
1

display: blockタグに適用する必要がありますa。スタイリングaとliは異なりますが、どちらにも背景を設定できます。li現在のタブのバックグラウンドが設定されていますが、ホバーすると、にバックグラウンドが適用されaます。いずれかを選択して一貫性を保つことをお勧めaしますdisplay: block;

于 2012-08-09T11:02:54.623 に答える