0

私の問題については、こちらを参照してください: http://jsfiddle.net/FvBqA/126/

私の問題は、アンカーとリーにホバーして、それが理にかなっていればホバー状態を1つ達成できるようにしたいということです。

現在、青色のセクションにカーソルを合わせると、青色のみが表示され (これは li )、アンカーにカーソルを合わせると、li とアンカーのホバーが表示されます - これは正しいことに注意してください。ただし、このホバー状態が必要なのは、ユーザーがアンカーにカーソルを合わせます。

ユーザーがリスト項目の上にカーソルを置いた場合、何も表示されません。

HTML

<ul id="nav">
    <li>
        <a href="#">Home</a>
    </li>  
    <li>
        <a href="#">Services</a>
    </li>  
    <li>
        <a href="#">Contact</a>
    </li>        
</ul>

CSS

#nav li {
    float: left;
    padding: 0 0 0 13px;
}
#nav li a {
    display: block;
    height: 51px;
    text-align: center;
    color: #494949;
    font-size: 13px;
    padding: 35px 15px 0;
    border: 1px solid transparent;
    text-decoration: none;                
}
    #nav li:hover {
        background: blue;    
}
#nav li:hover a {
    background: red;
    border: 1px solid #2596c0;
    color: #fff;
}
4

1 に答える 1

2

にカーソルを合わせたときに青と赤が必要であることを理解した上でli( にカーソルを合わせaても)、 で:hover疑似クラスを指定しli、子孫セレクターを使用してa要素をターゲットにします。

#nav li:hover a {
    background: red;
    border: 1px solid #2596c0;
    color: #fff;
}

JS フィドルのデモ。

于 2012-06-25T22:19:28.410 に答える