用JavaScript模拟CSS悬停

Question

我有一个包含以下代码的页面，以便在悬停父母时显示子孙。

.parent:hover .grandchildren {
    visibility: visible;
    opacity: 1;
}

我想调整孙子代及其子代的风格。

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

因此，我在考虑是否有必要在每次刷新页面时使上述父元素自动“悬停”（当然，仅当我仍在开发页面时）。

我已经尝试了以下方法，但是它们都不起作用：

$('.parent').mouseover()
$('.parent').hover()
$('.parent').trigger('mouseover')

我猜这是因为悬停是CSS事物，并且上面仅触发了不会触发CSS悬停的jQuery事件。

我对吗？ 实际上，我可以简单地说明一下CSS悬停和jQuery悬停之间的区别。

那么，除了浏览器开发人员工具提供的方法之外，还有什么方法可以模拟悬停？

Answer 1

鉴于以下样式：

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 ，并为所有样式添加了!important 。

这将导致p元素具有黄色背景，黑色边框，并且仍保持其默认蓝色。

以下内容适用于Chrome，Opera和Safari。 如果您需要IE或Firefox解决方案，请告诉我：

 function change() { var ss= document.styleSheets; for(var i = 0 ; i < ss.length ; i++) { var rules= ss[i].cssRules ? ss[i].cssRules : ss[i].rules; for(var j = 0 ; j < rules.length ; j++) { if(rules[j].selectorText==='p:hover') { rules[j].selectorText= 'p'; rules[j].style.cssText= rules[j].style.cssText.replace(/;/g,' !important;'); } } } } 

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

 <button onclick="change()">Change <b>p:hover</b> to <b>p</b></button> <p>Testing</p>