<h1>First Heading</h1>
<h1>Second Heading</h1>
<h1>Third Heading</h1>
.turnRed {
// storing all h1 tags in a variable
var headings = document.getElementsByTagName("h1");

// event listener must be in loop so we only modify
// the actual element being touched, instead of all
// elements that are stored in variable
for(var i=0; i< headings.length; i++){
  headings[i].addEventListener("mouseover", hoverOn);
  headings[i].addEventListener("mouseout", hoverOff);

// functions to add and remove red color CSS class
function hoverOn(){
function hoverOff(){

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.