CODEWITHSUNDEEP
jquery
Mike
Mike

Reputation: 6050

jquery addclass

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

Upvotes: 1

Views: 555

Answers (2)

Kanishka Panamaldeniya
Kanishka Panamaldeniya

Reputation: 17586

try adding the doctype beggning of your page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

UPDATE

The doctype declaration should be the very first thing in an HTML document, before the <html> tag.

The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.

The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers render the content correctly.

Upvotes: 2

Groovetrain
Groovetrain

Reputation: 3325

I know you're probably not asking this, but just using a :hover pseudo-class would work :)

a:hover { color: pink; }

Also, consider using the jQ hover() method and the jQ toggleClass() method:

$('a').hover(function() {
  $(this).toggleClass('over');
},
function() {
  $(this).toggleClass('over');
});

But I also agree with @Kanishka: using the correct DOCTYPE is imperative for IE

Upvotes: 3

Related Questions