'how to trigger hover on an element without actually hovering on it?

How do I trigger hover effect of all the elements on a page without hovering on any element.

I've written this very basic code for example

div
{
  background-color : red;
  height : 100px;
  width : 100px;
}

div:hover
{
  background-color : blue;
}
<div>
</div>
<br>
<div>
</div>

Here the elements are red by default and turn blue on hover. What can I do so that the boxes are blue soon as the page loads without me actually hovering on them.

javascripthtmljquerycss


Solution 1:[1]

Try .focus()

var ele = document.getElementsByTagName('div');
ele[0].focus();

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 scrummy

Related Questions