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?
<%@ Page Title="Home Page" Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head id="Head1" runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<style type="text/css">
a.over {color:pink;}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("a").mouseover(function () {
$(this).addClass("over");
//alert("mouseOver");
});
$("a").mouseout(function () {
$(this).removeClass("over");
});
});
</script>
</head>
<body>
<form id="Form1" runat="server">
<div>
<a class="" href="#">Link</a>
</div>
</form>
</body>
</html>
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.
Thank you
try adding the doctype beggning of your page
UPDATE