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腳本中添加/刪除這些類。