JavaScript - 保持伪类（：hover，：active，：focus）处于活动状态，直到发布

Question

我将如何保持这些状态（：hover，：focus，：active等）处于活动状态，直到发布？

看看这个例子：

<style> div:hover, div:focus, div:active { background: red; } </style> 

<div tabindex="-1">I would be red, if hovered, focused or being active. Until the button 'toggle off' is pressed.</div> 

<button onclick="toggleItem('on', 'hover');">Toggle on</button> 
<button onclick="toggleItem('off', 'hover');">Toggle off</button> 

function toggleItem(action, style) 
{ 
    if (action == "on") 
    { 
     // style activation 
    } 
    else if (action == "off") 
    { 
     // disable activated style 
    } 
} 

我在想设定的时间间隔，这将触发此状态下每x秒。但似乎并不是“良好的做法”......任何建议？

基本上就像开发工具：

Answer 1

为什么你特别需要的那些状态？

您可以将类添加到您的div：.div_hover，.div_focus {您的样式} 并在您的JS脚本中添加/删除这些类。