如何只对一个可支持的元素采取行动？

Question

我正在建立一个包含几个子列表的列表.当我将鼠标悬停在一个<li>元素上时,我想改变它的风格<li>,而不是它的父母的风格.

您可以在此处查看代码和演示.如果你将鼠标悬停在上面1.1,我只想1.1变成红色.如果我将鼠标悬停在上面1.3.1,我只想1.3.1变成红色.

我有什么需要改变CSS来实现这一目标？

谢谢!

Answer 1

在这种情况下,为什么不使用":hover"和"a"元素？

   li {
      display: block;
      width: 100px;
      background-color: #dedede;
    }

    ul > li > a:hover {
       color: red;
       display: block;
    }