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.