asp.net JQuery .hover event gives out “object expe

Question

This is what I have

On my .master page i have the following

<script type="text/javascript">
$(document).ready(function() {
    $(this).hover(function() {
        $(this).addClass("ui-state-hover");
    },
        function() {
            $(this).removeClass("ui-state-hover");
        }
    ).mousedown(function() {
        $(this).addClass("ui-state-active");
    })
    .mouseup(function() {
        $(this).removeClass("ui-state-active");
    });
});

and my asp.net buttons are declared as follows

<asp:button runat="server" id="cmdSubmitShipmentRequest" cssclass="ui-button ui-state-default ui-corner-all" text="Submit" />

The expected behavior is that any time the mouse pointer hovers in and out of any button the above declared css classes are added and removed. Currently the default css properties apply properly but any time I hover in and out of a button I get the following error "Object Expected" Line 11 (IE8 other browsers display nothing), which is the position where the "<script type="text/javascript">" begins.

any clue as to what I may be doing wrong?

EDIT WITH ANSWER

---

I was doing two things wrong

1. I was using $(this).hover should of been $('.ui-button').hover which I had initially but I typed it as $(".ui-button").hover NOTICE THE DOUBLE QUOTES!

2. On my .master page I am declaring my javascript using the asp.net javascript manager as follows

the problem was that I had the script declarations below my javascript code block!.

In the end this is what the javascript and code block look like and all works well as expected.

<asp:scriptmanager id="scriptManager" runat="server">
    <scripts>
        <asp:scriptreference path="~/javascript/jquery-1.3.2.min.js" />
        <asp:scriptreference path="~/javascript/jquery-ui-1.7.2.custom.min.js" />
        <asp:scriptreference path="~/Javascript/thickbox.js" />
    </scripts>
</asp:scriptmanager>

 <script type="text/javascript">
     $(document).ready(function() {
         $('.ui-button').hover(function() {
             $(this).addClass("ui-state-hover");
         },
            function() {
                $(this).removeClass("ui-state-hover");
            }
        ).mousedown(function() {
            $(this).addClass("ui-state-active");
        })
        .mouseup(function() {
            $(this).removeClass("ui-state-active");
        });
     });
</script> 

Answer 1

Try changing your code to this....

$(document).ready(function() {
    //SELECT THE .ui-button CLASS INSTEAD OF this
    $('.ui-button').hover(function() {
        $(this).addClass("ui-state-hover");
    },
                function() {
                    $(this).removeClass("ui-state-hover");
                }
        ).mousedown(function() {
            $(this).addClass("ui-state-active");
        })
        .mouseup(function() {
            $(this).removeClass("ui-state-active");
        });
});

I do not believe that "this" has the context that you were targeting when you use this line of code...

$(this).hover(function() {

Try replacing the line above with the following...

$('.ui-button').hover(function() {

Answer 2

would this give you more of what you want?

also, make sure you're including the jquery library somewhere above this.

$(document).ready(function() {
    $('.ui-button').hover(function() {
        $(this).addClass("ui-state-hover");
    },
                function() {
                    $(this).removeClass("ui-state-hover");
                }
        ).mousedown(function() {
            $(this).addClass("ui-state-active");
        })
        .mouseup(function() {
            $(this).removeClass("ui-state-active");
        });
});

Answer 3

In your current code snippet, $(this) is referring to $(document). Try this:

$(document).ready(function() {  
    $('.ui-button').hover(function() {  
        $(this).addClass("ui-state-hover");  
    }, <rest of code omitted>
}

Now $(this) is referring to $('.ui-button'), which is what you want.