JSで、ある要素をhoverしてるようにする

リンクの要素など、cssで:hoverでスタイルをつけている。

実際にhoverしなくても:hoverで指定したスタイルに一時的にしたい。
例えば、Aをクリックした時に、Bをhover状態のスタイルにしたい。

結論

無理だった
jsでhoverしていることにする、という動作はそもそも無理なようだ。

なので代わりに、.hoveredというクラスも一緒に定義して、jQueryなどでクラスをあてて実現する。

style.css

.B:hover, .B.hovered {
  background-color: #ccc;
}

main.js

$('.A').on('click', function() {
  $('.B').toggleClass('.hovered');
});