title: How to change border color in div ?
body: <p>I am new to web development, i have learned basics of Java, JSP, HTML, JS, CSS, JQ. I am stuck at a point in which I am trying to change the border color of a div when mouse hover event occurs, but I am failing in doing so. Below is the related code, please point out the mistakes and point me in a better directions. Thanks alot in advance.</p>
  
  <p>P.S: I have tried almost every stackoverflows questions/answers but I still failed to accomplished it. I thought it would be better if I post my own question with code to get suggestions for future aswell. Thanks is advance.</p>
  
  <pre><code>&lt;div id="navBar" style="height: 50px; width: 480px;"&gt;
              &lt;div id="homeButton" style="float: left; color: #73C20E; position:relative; width: 160px; height: 50px; border-top: 4px solid #73C20E;"&gt;
                  &lt;p&gt;Home&lt;/p&gt;
              &lt;/div&gt;
              &lt;div id="siteAdminButton" style="float: left; color: #73C20E;  position: relative; width: 160px; height: 50px; border-top: 4px solid #1C1C1C;" &gt;
                  &lt;p&gt;Site Administration&lt;/p&gt;
              &lt;/div&gt;
              &lt;div id="contactButton" style="float: left; color: #73C20E;  width: 160px; height: 50px; border-top: 4px solid #1C1C1C;"&gt;
                  &lt;p&gt;Contact Us&lt;/p&gt;
              &lt;/div&gt;                    
  &lt;/div&gt;
  </code></pre>
  
  <p>Heres JS:</p>
  
  <pre><code>$("document").ready(function (){
      $("#homeButton").mouseenter(function (){
          $(this).addClass("mouseOverNav");
      }).mouseleave(function (){
          $(this).removeClass("mouseOverNav");
      });  
  
      $("#siteAdminButton").mouseenter(function (){
          $(this).addClass("mouseOverNav");
      }).mouseleave(function (){
          $(this).removeClass("mouseOverNav");
      });
  
      $("#contactButton").mouseenter(function (){
          $(this).addClass("mouseOverNav");
      }).mouseleave(function (){
          $(this).removeClass("mouseOverNav");
      });
  });          
  </code></pre>
  
  <p>and here is css: </p>
  
  <pre><code>.mouseOverNav {
     cursor: pointer;   
     border-color: #73C20E;
  }
  </code></pre>
  
  <p>Summary: I have created 3 divs with borders, 2 of which have the same border color as background, I want to change border color to my theme whenever mouse hovers, and change it back to the background color when mouse leaves and make the cursor a Pointer. </p>
  
  <p>So far: Pointer Cursor is working but its not changing the border color. Thanks in Advance.</p>