将 :hover 应用到 ::before（使用 li）答案

【问题标题】：Applying :hover to ::before (using li)将 :hover 应用到 ::before（使用 li）
【发布时间】：2014-05-15 23:14:50
【问题描述】：

如何在下面的代码中将:hover 应用到::before，我尝试了几种不同的组合，但没有结果。我的目标是改变 · 当我将鼠标悬停在链接/li 上时。

td.infolinks ul{
   padding: 0px 0px 0px 0px;
   margin: 0px;
   list-style-type: none;
}

td.infolinks ul li::before{
   content: "·";
   color: #FF6666;
   margin-right: 5px;
}

td.infolinks a:hover td.infolinks ul li::before{
   color: blue;
}

【问题讨论】：

尝试td.infolinks ul li:hover:before { color:blue; } - 如果不起作用，请发布一些 html :)
jsfiddle.net/pmLz9
@RobSedgwick 我认为 OP 想要一些不同的东西，从标题开始，他可能只想在 :before 上悬停时对 :before 应用一些样式，将鼠标悬停在整个li 项目上时不会。当悬停在整个 li 项目上时，您的示例将更改 :before 的样式。
是的，也许，@KingKing - 听起来 Op 可以诚实地使用列表样式.. 不知道
@RobSedgwick 然而，我们只需要使用一个小技巧来实现这一点，我刚刚从您的演示中对其进行了一些调整，结果在这里jsfiddle.net/pmLz9/1（据我所知pointer-events 受到几乎现代浏览器的良好支持 - 可能需要添加一些前缀）。

标签： html css hover html-lists

【解决方案1】：

应该是

ul li:hover::before { color: #FF6666; }

【讨论】：