CODEWITHSUNDEEP
javascriptjqueryhtml
Adhip
Adhip

Reputation: 29

Make another class active while hovering a class

How to make another class active while hovering another class ? First class is "sidebarIcon__icon-cat_toys" Second class to become active is "sidebarSecond__content sidebar__6".
Here First class is becoming active but not the other one.

<script>
    $(".sidebarIcon__icon-cat_toys").hover( function () {
        $(this).addClass("active");
        $(".sidebarSecond__content sidebar__6").addClass("active");
    }, function (){
        $(this).removeClass("active");
        $(".sidebarSecond__content sidebar__6").removeClass("active");
    });
</script>

Upvotes: 0

Views: 647

Answers (2)

rrk
rrk

Reputation: 15846

You need to use .sidebarSecond__content.sidebar__6 this if the classes of other element are sidebarSecond__content and sidebar__6. in html we add class="sidebarSecond__content sidebar__6", but in jquery/css selectors, this is how we select those objects .sidebarSecond__content.sidebar__6.

eg.

<div class="foo bar">

The above div has two CSS classes foo and bar. So we will use the selector $('.foo.bar') to get the element.

<script>
    $(".sidebarIcon__icon-cat_toys").hover( function () {
        $(this).addClass("active");
        $(".sidebarSecond__content.sidebar__6").addClass("active");
    }, function (){
        $(this).removeClass("active");
        $(".sidebarSecond__content.sidebar__6").removeClass("active");
    });
</script>

Upvotes: 2

Felipe Elia
Felipe Elia

Reputation: 1418

I think it's just a typo: .sidebarSecond__content sidebar__6 has a space in the middle, making it a class followed by an element. Shouldn't it be .sidebarSecond__content_sidebar__6?

Upvotes: 0

Related Questions