Make another class active while hovering a class

Question

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>

Answer 1

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>

Answer 2

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 ?