gpt4 book ai didi

jquery - "element:hover"和 "element :hover"有区别吗

转载 作者:太空宇宙 更新时间:2023-11-03 19:42:44 29 4
gpt4 key购买 nike

我正在测试 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;
}

然后一切正常,输出如下:

"Initial Working output"

也可以看到Here .


但如果最初的 CSS 类似于 element:hover即:

.nav_menu li:hover{
background:#a55;
color:#fff;
}

然后在 hovering 之后出现初始背景颜色的奇怪填充元素。

喜欢:

"Weird Behaviour"

如您所见element:hover 的这个版本没有按预期工作。 Fiddle .

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


所以很明显element :hover之间是有区别的和 element:hover (注意空格(&nbsp;))。还是我的浏览器有问题?在 chrome 上测试过和 firefox ;同样的问题。

这里的高手能帮我解释一下吗?提前致谢。

附言:

我不想使用 a:hover事实上,我来这里是为了知道为什么会这样。

最佳答案

是的,有区别:

  • element:hover 将规则应用于处于“悬停”状态的 element
  • element :hover 将规则应用于 element后代,当它们处于“悬停”状态时。

关于jquery - "element:hover"和 "element :hover"有区别吗,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25432107/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com