Question

I am adding a css class to some asp buttons on mouseenter and removing that class on mouseleave but i don’t see the effect of new class the class which i added on mouse enter is still there.

I m doing something like:

 <script src="jquery-1.6.2.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function () {

            // mouse hover
            $("[id^='MangoPager_btn']").mouseenter(mouseenterfunction);
            // mouse leave
            $("[id^='MangoPager_btn']").mouseleave(mouseleavefunction);

        });

        function mouseleavefunction() {

            $(this).removeClass("pagerbtnHover");
            $(this).addClass("buttonclass");        }

        function mouseenterfunction() {

            $(this).addClass("pagerbtnMouseEnter");
        }

    </script>

on mouse leave i want to remove pagerbtnMouseEnter class and want to attach buttonclass.

Answer 1

You’re adding a different class than you’re removing:

$(this).addClass("pagerbtnMouseEnter");

// should be $(this).removeClass('pagerbtnMouseEnter');
$(this).removeClass("pagerbtnHover");

Make sure both class names match and you shouldn’t have a problem.

On another note, you could clean your JavaScript up a bit by using hover() and getting rid of the use of $(document).ready():

$(function(){
    $("[id^='MangoPager_btn']").hover(function(){
        $(this).toggleClass('pagerbtnMouseEnter');
    });
);