title: Using Hover in JQuery when the mouse moves over a list item
body: <p>Hello I have this list that i am working on. When i move the mouse over a list item i want to change the border color of the list item to red, and when i move the mouse off, it should change back to white. Here is my html</p>
  
  <pre><code>&lt;html&gt; 
    &lt;head&gt; 
      &lt;title&gt;JQuery Problem 1&lt;/title&gt; 
      &lt;script type="text/javascript" src="jquery-1.4.min.js"&gt;&lt;/script&gt; 
      &lt;script type="text/javascript" src="problem1.js"&gt;&lt;/script&gt; 
    &lt;/head&gt; 
    &lt;body&gt; 
      &lt;ol&gt; 
        &lt;li&gt;Comp 250
          &lt;ul&gt; 
            &lt;li&gt;HTML&lt;/li&gt; 
            &lt;li&gt;CSS&lt;/li&gt; 
            &lt;li&gt;CGI&lt;/li&gt; 
            &lt;li&gt;PHP&lt;/li&gt; 
            &lt;li&gt;JavaScript&lt;/li&gt; 
          &lt;/ul&gt; 
        &lt;/li&gt; 
        &lt;li&gt;Comp 345
          &lt;ul&gt; 
            &lt;li&gt;Objects and classes&lt;/li&gt; 
            &lt;li&gt;Static and constant members&lt;/li&gt; 
            &lt;li&gt;Operator overloading&lt;/li&gt; 
            &lt;li&gt;Templates&lt;/li&gt; 
            &lt;li&gt;Inheritance&lt;/li&gt; 
            &lt;li&gt;Polymorphism&lt;/li&gt; 
          &lt;/ul&gt; 
        &lt;/li&gt; 
        &lt;li&gt;Comp 431
          &lt;ul&gt; 
            &lt;li&gt;Perl language&lt;/li&gt; 
            &lt;li&gt;File uploads and downloads&lt;/li&gt; 
            &lt;li&gt;AJAX and JSON&lt;/li&gt; 
            &lt;li&gt;Java Servlets&lt;/li&gt; 
            &lt;li&gt;JSP&lt;/li&gt; 
          &lt;/ul&gt; 
        &lt;/li&gt; 
      &lt;/ol&gt; 
    &lt;/body&gt; 
  &lt;/html&gt; 
  </code></pre>
  
  <p>Tis is my jquery</p>
  
  <pre><code>$(document).ready(function()
  {
  
  
      $("ol &gt; li").css({margin: "1em", fontWeight: "bold"});
      $("ol li li").css({fontWeight: "normal"}); 
  
  
      $("li").hover(function()
          {
              $(this).css('border-color', 'red');         //switches color when on
          },
          function()
          {
              $(this).css('border-color', 'white')            //switches back when the mouse moves off
          })
  
  
  
  
  });
  </code></pre>