Jquery .addClass

help.

HTML

<h2 class="test">
Hi, everybody!
</h2>

CSS

.red
{
  color:red;
  background-color:yellow;
}

JavaScript

$(document).ready(function() {
  $('.test').function() {
  	$(this).addClass("red");
  });
  
   $('.test').function() {
    $(this).removeClass('red');
  });
});

//Basically, I don't understand why adding/removing the "red" class of CSS doesn't turn the text the appropriate cover on mouseenter in jquery. It works like this in the course modules and they advised keeping your CSS/HTML/JS separate and clean. 

//*shrug*