I would like to be able to fadeout this class

<h2 class="care-home-fees"><a title="Care Home Fees" href="#">Text</a></h2>

and fade in this

<h2 class="care-home-fees-over"><a title="Care Home Fees" href="#">Text</a></h2>

Notice there are two separate images

Here is my current markup which doesnt seem to work

$(document).ready(function(){  

$("h2.care-home-fees").hover( 
  function () {
    $(this).addClass("care-home-fees-over");
  },
  function () {
    $(this).removeClass("care-home-fees");
  }
);  

});

and the button printed before any change

<h2 class="care-home-fees"><a title="Care Home Fees" href="#">Text</a></h2>