Question

我正在测试JQuery代码，以便将:hover Css动态追加到<head>。

我发现element :hover和element:hover（注意空间）的工作存在差异

也就是说，当我使用CSS动态更改:hover的{{1}}时：

JQuery

<小时/> FULL CODE

如果初始CSS有

$(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.
});

，那么它可以正常工作。

那就是如果初始CSS是：

element :hover

然后一切正常，输出就像：

"Initial Working output"

你也可以看到它Here。

<小时/>

但如果最初的CSS就像.nav_menu li :hover{ background:#a55; color:#fff; } 那就是：

element:hover

然后在.nav_menu li:hover{ background:#a55; color:#fff; }元素之后发生初始背景颜色的奇怪填充。

像：

"Weird Behaviour"

正如您所看到的，hovering的此版本无法按预期工作。 Fiddle

此处也未正确呈现初始样式。

因此很明显且element:hover和element :hover之间存在差异（注意空格（element:hover））。还是我的浏览器故障？在 和chrome上对其进行了测试;同样的问题。

请专家在这，请清楚这个给我？提前谢谢。

PS：

我不想使用firefox实际上我在这里知道为什么会这样。

Answer 1

是的，有区别：

element:hover将规则应用于element，当它位于＆＃34; hovered＆＃34;状态;
element :hover将规则应用于element的{em>后代，当它们位于＆＃34; hovered＆＃34;状态。

Answer 2

有很大的不同。与element .div-class和element.div-class相同。第二个将选择.div-class类element，第一个将选择.div-class的孩子element

Answer 3

是！有区别。

element:hover适用于element本身处于悬停状态时。左element :hover适用于element的子元素，当其中任何元素处于悬停状态时。

“element：hover”和“element：hover”之间有什么区别吗

3 个答案: