我正在测试JQuery代码，以便将:hover Css动态附加到<head>。
并且我发现element :hover和element:hover的工作方式有所不同（请注意空格）
也就是说，当我使用CSS动态更改:hover的JQuery时：
$(document).ready(function(){
$("head").append("<style type='text/css'>
.nav_menu li :hover{
background-color: red !important;
}
</style>"); // Code is formatted and trimmed for simplicity.
});
FULL CODE
如果初始CSS具有
element :hover，则可以正常工作。也就是说，如果初始CSS是：
.nav_menu li :hover{
background:#a55;
color:#fff;
}
然后，一切正常，输出如下：
您也可以看到它Here。
但是如果最初CSS就像
element:hover那是：
.nav_menu li:hover{
background:#a55;
color:#fff;
}
然后，在
hovering元素之后发生初始背景颜色的奇怪填充。喜欢：
如您所见，此版本的
element:hover无法正常工作。 Fiddle。此外，初始样式在此样式中显示不正确。
因此很明显，在
element :hover和element:hover之间存在区别（注意空格（ ））。还是我的浏览器有问题？在chrome和firefox上进行了测试；两者都存在相同的问题。这里的专家可以告诉我吗？提前致谢。
PS：
我不想使用
a:hover实际上我在这里要知道为什么会这样。 最佳答案
是，有一点不同：
当element:hover处于“悬停”状态时，element会将规则应用于该规则。element :hover将规则应用于element的后代处于“悬停”状态时。
关于jquery - “element:hover”和“element:hover”之间有什么区别吗，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25432107/