4

<ul/>ホバーすると2番目のリストを表示するドロップダウンメニューがあります<ul/>。

したがって：

<ul id="NavBar">
    <li><a href="#">News & Press Releases</a>
        <ul class="NavBar_drop">
            <li><a href="#">OCPO Home</a></li>
            <li><a href="#">Press Releases</a></li>
            <li><a href="#">Ocean County Government</a></li>
        </ul>
    </li>
</ul>

「ニュース & プレス リリース」アンカー タグにカーソルを合わせると、次のような効果が発生します。

#NavBar > li > a:hover {
    -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
    background: #F4F4F4;
    background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
    color: #000;
}

ただし、「OCPO ホーム」などの子リンクのいずれかに移動すると、上のホバーの効果が消えます。明らかに、別の CSS タグを使用し続けるように強制する必要がありますが、何が間違っているのかわかりません。これは私の試みです：

.NavBar_drop:hover #NavBar > li > a {
    -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
    background: #F4F4F4;
    background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
    color: #000;
}
4

3 に答える 3

2

技術的には、親要素に対して効果をトリガーすることはできません。ただし、あなたが述べた問題を考えると、実際にそれを行う必要はありません。子リンクに移動すると、オフに移動し<a>ます。したがって、ホバー効果が停止します。<li>代わりに、親にカーソルを合わせたときにトリガーされるようにセレクターを変更します。

#NavBar > li:hover { 
    /* CSS Styles here... */
}
于 2013-05-31T19:15:52.637 に答える
1

<a>Dreの答えの代わりに、 when 全体で whenを強調したいだけの場合は、<li>代わりに次の css ルールを使用してみてください。

#NavBar > li:hover > a {

実際のデモを見る

于 2013-05-31T19:18:13.050 に答える