我有 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;}
焦点不起作用;(有人可以帮助我吗?
最佳答案
这是可能的,只要你意识到一个非交互元素(交互元素是那些像input
,select
,a
...) 无法集中注意力。它可以响应:active
伪类,但是一旦鼠标被释放它就不会持续存在(如果鼠标被释放,将被默认的选择操作覆盖)移动):
#NavItem li {background-color: transparent; text-decoration: none; }
#NavItem li:hover {background-color: #ff8700;}
#NavItem li:active {background-color: #f00;}
重要的是要记住 CSS 用于表示。 JavaScript(可能还有其他语言,例如 dart)用于 HTML 提供的内容之上的功能/行为/交互层。
使用 JavaScript 不是一种“作弊”。
关于user-interface - 当用鼠标选中时,我需要能够更改 li 的背景颜色。仅使用 css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9641306/