html - CSS 直系の故人 Li

Question

cssでは、ホバー時にテスト1の色を変更し、リスト1、2、3の色を変更するにはどうすればよいですか?

<ul>
    <li> 
        test 1 
        <ul>
            <li> List 1</li>
            <li> List 2</li>
            <li> List 3</li>
        </ul>
    </li>
</ul>

Answer 1

1 つの方法は、「デフォルト」の色を指定することです。

li:hover {
    color:#f00;
}
li, li:hover li {
    color:#000;
}​

http://jsfiddle.net/D8dwt/1/

もう 1 つの (ごまかし?) は、より多くのマークアップを使用して、ホバー時にスタイルを設定するコンテンツをラップすることです。

li:hover span {
    color:#f00;
}​

<ul>
    <li> 
        <span>test 1</span>
        <ul>
            <li> List 1</li>
            <li> List 2</li>
            <li> List 3</li>
        </ul>
    </li>
</ul>​

Answer 2

これは 1 つの方法です。

ul > li {
    color: red;
}

ul > li:hover {
    color: blue;
}

ul > li:hover > ul > li {
    color: red;
}

Answer 3

独自のクラスを指定し、CSS ファイルで定義します。

<li class="yourclass">

または、タグに入れて、CSS でリンクを定義します。

li.yourclass a:hover {
    text-decoration: underline ;
}