用javascript模拟CSS悬停

我有一个包含以下代码的页面，以便在悬停父对象时显示孙辈

.parent:hover.孙子{
能见度：可见；
不透明度：1；
}

我想调整孙子和孩子们的风格

每次我进行一些修改并刷新页面时，我都必须在开发者工具中查找上述父级，并通过单击小复选框将其状态切换为“悬停”。
现在我使用的是一台没有鼠标的笔记本电脑，你可以想象这种重复的F12按键、HTML元素定位和复选框点击是多么烦人

因此，我在想，是否有必要在每次刷新页面时自动“悬停”所述父元素（当然，只有在我仍在开发页面时）

我尝试了以下方法，但没有一种有效：

$（'.parent'）.mouseover（）
$（'.parent'）.hover（）
$（'.parent'）.trigger（'mouseover'））

我猜这是因为悬停是一个CSS的东西，上面只会触发jQuery事件，而不会触发CSS悬停

我说得对吗？实际上，我可以用一个简短的例子来说明CSS hover和jQuery hover之间的区别

那么，除了浏览器开发工具提供的方式外，还有没有其他方式来模拟悬停呢？

给出了这些样式：

p:hover {
  background: yellow;
  border: 1px solid black;
}

p {
  background: lightgreen;
  color: blue;
}

…通过将样式表更改为如下所示，可以模拟永久悬停：

p {
  background: yellow !important;
  border: 1px solid black !important;
}

p {
  background: lightgreen;
  color: blue;
}

请注意，我从第一个选择器中删除了

：hover

，并添加了

！重要信息

，适用于其所有样式

这将导致

p

元素具有黄色背景和黑色边框，并且仍然保持默认的蓝色

以下是Chrome、Opera和Safari中的作品。如果您需要IE或Firefox解决方案，请告诉我：

函数更改（）{
var ss=document.styleSheets；
对于（变量i=0；i

p：悬停{
背景：黄色；
边框：1px纯黑；
}
p{
背景：浅绿色；
颜色：蓝色；
}

更改p：将鼠标悬停到p
测试

在测试css选择器时，您是否可以从中删除

：悬停

？好的，那么您可能已经有了一个没有悬停的选择器，但是您可以使用

超越它！重要信息

jQuery的

hover（）

可能是在JavaScript中创建悬停效果的最佳方法，但是不能强制css使用伪类。我建议创建一个

.hover

类，并使用jQuery添加/删除该类。或者按照@andrew的建议删除用于测试目的的伪选择器，或者将hover CSS设置为类，然后使用按钮切换该类。@andrew我已经想到了这一点，但是我正在使用一个模板，其中控制这种悬停效果的CSS散布在许多地方，删除所有的

：hover

也不是一件容易的工作，但是你是对的，这是值得做的。然而，我的问题更多的是为了学习——有没有办法模拟一个伪悬停？