JavaScriptを使用してCSSの「ホバー状態」をトリガーする方法

Question

ユーザーが要素にカーソルを合わせると、CSSの「ホバー状態」がトリガーされます。

<style>
.element{

}
.element:hover{
    background-color:red;
}
</style>

Javascriptを使用して要素を「ホバー状態」に設定するにはどうすればよいですか？

出来ますか？

Answer 1

:focusホバーの代わりに、次を使用できます。

var links = document.getElementsByTagName('a');
links[0].focus();

JS Fiddle demo 。

または

var linkToFocus = document.getElementById('link');
linkToFocus.focus();

JS Fiddle demo 。

このアプローチでは、明らかに、a:focus スタイル：

a:link, a:visited {
    background-color: #fff;
}
a:hover, a:focus, a:active {
    background-color: #f00;
}

Answer 2

：hoverスタイルを別のクラスに複製し、永続的に変更したいときにそのクラス名を要素に追加する方がおそらく良いでしょう。擬似クラスは、理由により「擬似」です。