Why isn't my hover event firing in JQuery?
<p>I'm not sure why my event isn't firing?  I simply want to change the list style type when the user hovers over an li.  It doesn't look like I'm missing anything, but nothing is happening.</p>

<pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %&gt;

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head runat="server"&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;link href="theme.css" rel="stylesheet" type="text/css" /&gt;
&lt;/head&gt;
&lt;script type="text/javascript"&gt;
  $(".component ol li").hover(function() {
          $(this).css('list-style-type', 'disc');
      }
   );
&lt;/script&gt;
&lt;body&gt;
    &lt;form id="form1" runat="server"&gt;
     &lt;div class="component"&gt;
     &lt;ol&gt;
         &lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&amp;nbsp;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&amp;nbsp;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&amp;nbsp;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&amp;nbsp;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&amp;nbsp;&lt;/li&gt;
     &lt;/ol&gt;
     &lt;/div&gt;    
    &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
