jquery addclass
<p>This is probably simple but I am new at jQuery so... In IE 8 the link color does not turn pink even in compatibility mode. Now if I run it on firefox,chrome it works.  But here is the thing that baffles me.  If I add an alert to the function then in IE 8 the link turns pink and the message box displays.  Can someone please explain what is going on here?</p>

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

&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt;
&lt;head id="Head1" runat="server"&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;link href="~/Styles/Site.css" rel="stylesheet" type="text/css" /&gt;
&lt;script type="text/javascript" src="Scripts/jquery-1.4.1.js"&gt;&lt;/script&gt;
&lt;style type="text/css"&gt;
a.over {color:pink;}

&lt;/style&gt;

&lt;script type="text/javascript"&gt;
    $(document).ready(function () {
        $("a").mouseover(function () {
            $(this).addClass("over");
            //alert("mouseOver");
        });

        $("a").mouseout(function () {
            $(this).removeClass("over");

        });
    });

&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;form id="Form1" runat="server"&gt;
    &lt;div&gt;
    &lt;a class="" href="#"&gt;Link&lt;/a&gt;
    &lt;/div&gt;

&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>I know I can probably just add something like a:hover to my css but this is just a text book example that I can not get to work.</p>

<p>Thank you </p>
