Newbie Q: JQuery Hover and Click Menu

Newbie Q: JQuery Hover and Click Menu

Hi I'm trying to implement a site using a JQuery menu that fades and changes content instantly on click. That functionality is working fine; however, I'd like to add a hover event that changes gray menu item to black (opacity = 1 ) when users mouse over the content (just like a css hover effect on a link). Additionally, I'd like for "home" to always have an opacity of 1 (remain black) but still operate as a navigational jquery button (not simply a hyperlink to the website).

Thanks in advance for your help!



HTML File:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
   <title>My Home Page</title>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <link rel="stylesheet" type="text/css" href="style.css" />
   <script type="text/javascript" src="js/jquery.js"></script>
   <script type="text/javascript">
   
      $(function(){
         $("#about-button").css({
            opacity: 0.5
         });
         $("#contact-button").css({
            opacity: 0.5
         });

         $("#page-wrap div.button").click(function(){
            $clicked = $(this);
                        
            // if the button is not already "transformed" AND is not animated
            if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {
               
               $clicked.animate({
                  opacity: 1,
                  borderWidth: 5
               }, 600 );
               
               // each button div MUST have a "xx-button" and the target div must have an id "xx"
               var idToLoad = $clicked.attr("id").split('-');
               
               //I search through the content for the visible div and we fade it out
               $("#content").find("div:visible").fadeOut("fast", function(){
                  //once the fade out is completed, we start to fade in the right div
                  $(this).parent().find("#"+idToLoad[0]).fadeIn();
               })
            }
            
            
         //we reset the other buttons to default style
            $clicked.siblings(".button").animate({
               opacity: 0.5,
               borderWidth: 1
            }, 600 );
                  });
      });
      
      
   </script>

<body>

   <div id="page-wrap">
      
      <div id="home-button" class="button">
         <h1><p class="button">Home.</p></h1>
      </div>
      <div id="about-button" class="button">
         <h1><p class="button">About.</p></h1>
      </div>

      <div id="contact-button" class="button">
         <h1><p class="button">Contact.</p></h1>
      </div>
      
      <div class="clear"></div>
      
      <div id="content">
         
         <div id="home">
            <p>This content is for home.</p>
         </div>
         
         <div id="about">
            <p>This content is for about.</p>
         </div>
         
         <div id="contact">
            <p>This content is for contact.</p>
            
         </div>
      </div>
   </div>

</body>

</html>



CSS File:

* {
   margin: 0;
   padding: 0;
}

body {
   font-size: 100%;
   font-family: Helvetica, sans-serif;
}

h1 {
   color: black;
   font-size: 150%;
   font-family: Helvetica, sans-serif;
   font-weight: bold; 
   cursor: pointer;
}

.clear {
   clear: both;
}

#page-wrap {
   width: 760px;
   background: white;
   margin: 20px auto;
   padding: 20px;
   font-size: 100%;
}

.button {
   float: left;
   display: inline;
   margin-right: 3px;
}

#home {
   display: block;
   padding: 30px;
}
#home-button {
   opacity: 1.0;
}

#about {
   display: none;
   padding: 30px;
}
#about-button {
   opacity: 0.5;
}


#contact {
   display: none;
   padding: 30px;
}
#contact-button {
   opacity: 0.5;

}