CODEWITHSUNDEEP
jquery
Embedd_0913
Embedd_0913

Reputation: 16555

How to remove a css class with jquery?

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.

Upvotes: 0

Views: 887

Answers (6)

Justin Niessner
Justin Niessner

Reputation: 245419

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

Upvotes: 1

Jose Faeti
Jose Faeti

Reputation: 12294

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...

Upvotes: 0

Southpaw018
Southpaw018

Reputation: 1

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

Upvotes: 0

Matt Ball
Matt Ball

Reputation: 359816

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

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

Upvotes: 1

Einacio
Einacio

Reputation: 3532

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

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

you are removing the wrong class....

Upvotes: 1

Jon Grant
Jon Grant

Reputation: 11530

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

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

Upvotes: 3

Related Questions