How to remove a css class with jquery?

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.

As an aside, you can chain function calls to a jQuery-object, this way you can avoid initializing the same object several times. E.g. $(this).removeClass(...).addClass(...). — nikc.org
– nikc.org, Commented Aug 3, 2011 at 13:35

Jon Grant · Accepted Answer · 2011-08-03 13:31:15Z

3

You are not removing the same class you are adding...

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

answered Aug 3, 2011 at 13:31

Jon Grant

11.5k2 gold badges40 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Embedd_0913 Over a year ago

Thanks Jon Grant it was a silly mistake of mine i just renamed the class name and didn't updated in the function...thank u ..

Justin Niessner · Accepted Answer · 2011-08-03 13:38:16Z

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');
    });
);

edited Aug 3, 2011 at 13:38

answered Aug 3, 2011 at 13:32

Justin Niessner

246k40 gold badges416 silver badges546 bronze badges

Comments

Einacio · Accepted Answer · 2011-08-03 13:31:37Z

1

$(this).removeClass("pagerbtnHover");

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

you are removing the wrong class....

answered Aug 3, 2011 at 13:31

Einacio

3,5422 gold badges19 silver badges21 bronze badges

Comments

Matt Ball · Accepted Answer · 2011-08-03 13:34:39Z

1

Even simpler: use .hover() with a single argument, and .toggleClass().

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

answered Aug 3, 2011 at 13:34

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

Comments

Southpaw018 · Accepted Answer · 2011-08-03 13:36:14Z

0

I would recommend that you make all buttons have the buttonclass class at all times, and have pagerBtnHover override the necessary styles in button class. Get rid of the pagerbtnMouseEnter class. Then, you can do:

function mouseleavefunction() {
    $(this).removeClass("pagerbtnHover");
}

function mouseenterfunction() {
    $(this).addClass("pagerbtnHover");
}

answered Aug 3, 2011 at 13:36

Southpaw018

1

Comments

Jose Faeti · Accepted Answer · 2011-08-03 13:36:53Z

0

No need to call the jQuery selector twice, you can chain.

$(this).removeClass('pagerbtnMouseEnter').addClass("buttonclass");

Also you should stick that retrieved element to a variable if you want to use it somwhere else, instead of calling the same jQuery function to find it again and again.

var $this = $(this);

// Use $this from here on...

answered Aug 3, 2011 at 13:36

Jose Faeti

12.3k6 gold badges40 silver badges53 bronze badges

Collectives™ on Stack Overflow

How to remove a css class with jquery?

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related