Newb help with simple div swap on hover

Newb help with simple div swap on hover

Hello,

I'm trying to do a simple content swap between two divs. I have four links with associated content links (hidden on page load) that I would like to swap out with their respective links when hovered as well as add different classes based on hovered or not hovered. I've tried toggle(), hover(), replaceWith() but can't get anything working, here is what I have, please help.

  1.     <script src="js/jquery-1.4.4.min.js" type="text/javascript" charset="utf-8"></script>
  2.    
  3.     <script type="text/javascript" charset="utf-8">
  4.         $(function(){
  5.             $("#link1-content").hide();
  6.             $("#link2-content").hide();
  7.             $("#link3-content").hide();
  8.             $("#link4-content").hide();
  9.             $("#link1").hover(function(){
  10.                 $(this).hide();
  11.                 $("#link1-content").show();
  12.             }, function(){
  13.                 $("#link1").show();
  14.                 $("#link1-content").hide();
  15.             });
  16.         });
  17.        
  18.     </script>
  19.     <style type="text/css" media="screen">
  20.         .hover {
  21.             background-color: aqua;
  22.         }
  23.        
  24.         #nav {
  25.             width: 300px;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30. <div id="wrapper">
  31.     <div id="hero">
  32.         <div id="nav">
  33.             <div id="link1">link1</div>
  34.             <div id="link1-content">link1 content</div>
  35.             <div id="link2">link2</div>
  36.             <div id="link2-content">link2 content</div>
  37.             <div id="link3">link3</div>
  38.             <div id="link3-content">link3 content</div>
  39.             <div id="link4">link4</div>
  40.             <div id="link4-content">link4 content</div>
  41.         </div>
  42.     </div>
  43. </div>