Question

57

How to add active class on hover and on click?

rated 0 times [ 60] [ 3] / answers: 1 / hits: 19440 / 10 Years ago, mon, september 15, 2014, 12:00:00

I'm developing an application where I need to add class active for both hover and click events.

The challenge I am facing here is when I hover my content, it adds the class active. There is no problem in that.

Since it is active now, when I am about to click on content it should hold up with the class active. But instead it goes to the normal state and it toggles the class.

JQuery

$(div).hover(

    function() {

        $(this).addClass('active');

    }, function() {

        $( this ).removeClass('active');

    }

);

$( div ).click(function(){

        $(this).toggleClass('active');

});

DEMO

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

deanna

Add To Favorites

Follow

Total Points: 84

Total Questions: 86

Total Answers: 107

Location: Cyprus

Member since Wed, Dec 8, 2021

3 Years ago

deanna questions

1 CastError: Cast to ObjectId failed for value XXXXXXXXXX (type string) at path _id for model XXXX

Thu, Apr 21, 22, 00:00, 2 Years ago

1 Next.js behavior on back button pressed

Mon, Sep 6, 21, 00:00, 3 Years ago

1 React-Router + Typescript error while wrapping component with Router No overload matches this call

Sat, Feb 13, 21, 00:00, 3 Years ago

1 Use the webpack asset module with a custom output filename

Sun, Jan 17, 21, 00:00, 3 Years ago

1 React js random color

Sun, Nov 15, 20, 00:00, 4 Years ago

View All

answered 10 Years ago jaquelineh · Accepted Answer

Use CSS for the hover event

div:hover{background:red;}

And remove the hover event from your Javascript:

$( div ).click(function(){

    $(this).toggleClass('active');

});

Fiddle

If you want the same functionality without CSS.

Add a second class called clicked. Let the hover event check for this class before removing the class.

$(div).hover(

    function() {

        $(this).addClass('active');

    }, function() {

        if(!$( this).hasClass('clicked') ){

            $( this ).removeClass('active');

        }

    }

);



$(div).click(function(){

    $(this).toggleClass('clicked');

});

Fiddle