Question

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

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

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

每次进行一些修改并刷新页面时，我都必须在开发人员工具中查找所述父级，并将其状态切换为＆＃34; hover＆＃34;点击小复选框。
现在我使用的是没有鼠标的笔记本电脑，你可以想象这种重复的F12按键，HTML元素定位和复选框点击是多么令人讨厌。

所以我在想，无论如何都要让所述父元素自动地徘徊在＆＃39;每次刷新页面时（当然只有当我还在开发页面时）。

我尝试过以下操作，但没有一个能够正常工作：

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

我想这是因为悬停是一个CSS事物，上面只触发了不会触发CSS悬停的jQuery事件。

我是对的吗？实际上我可以使用CSS hover和jQuery hover之间差异的简要说明。

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

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>

使用javascript模拟CSS悬停

1 个答案: