html - CSS Direct 死者李

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

一种方法是指定“默认”颜色：

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

http://jsfiddle.net/D8dwt/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

这是一种方法：

ul > li {
    color: red;
}

ul > li:hover {
    color: blue;
}

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

Answer 3

添加test1到div元素中，使其位于单独的叶子中。

CSS：

div:hover {
   color:  blue;
}

虽然可能有一种方法可以在不修改 html 的情况下做到这一点..

Answer 4

给它自己的类并在你的 CSS 文件中定义它。

<li class="yourclass">

或者把它放在标签中并在你的 CSS 中定义链接

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