Using Hover in JQuery when the mouse moves over a list item
<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>
