JavaScript - 保留伪类(:hover, :active, :focus) active, 直到发布

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 脚本中添加/删除这些类。