user-interface - 当用鼠标选中时，我需要能够更改 li 的背景颜色。仅使用 css

Question

我有 ul 菜单，其中 li 没有 a:links，我需要能够在用鼠标选中时更改 li 的背景颜色。

    <div id="dvMainNavMenu">
        <ul id="NavItem">
        <li>Nav Item</li> 
          <li>Nav Item</li>   
          <li>Nav Item</li> 
        </ul>
    </div>

#NavItem li  {background-color: transparent; text-decoration: none; }
#NavItem li:hover {background-color: #ff8700;}
#NavItem li:focus {background-color: #ff8700;}

焦点不起作用；(有人可以帮助我吗？

Answer 1

这是可能的，只要你意识到一个非交互元素(交互元素是那些像input，select，a ...) 无法集中注意力。它可以响应:active伪类，但是一旦鼠标被释放它就不会持续存在(如果鼠标被释放，将被默认的选择操作覆盖)移动):

#NavItem li  {background-color: transparent; text-decoration: none; }
#NavItem li:hover {background-color: #ff8700;}
#NavItem li:active {background-color: #f00;}

JS Fiddle demo .

重要的是要记住 CSS 用于表示。 JavaScript(可能还有其他语言，例如 dart)用于 HTML 提供的内容之上的功能/行为/交互层。

使用 JavaScript 不是一种“作弊”。