Geek Answers Handbook

AddClass on hover for multiple items

So, I have been working on this script all day, and all the examples I saw just don't do what I want. Here is my CodePen example . Try hovering over "MENU" and "SETTINGS." I will try to explain the problem with the words:

Script:

var activeItem = $("#menu .active");
var items = $("#menu .main:not(.active)");

activeItem.addClass("active-2");

items.hover(function () {
    "use strict";
    activeItem.toggleClass("active-2");
});

$(document).mousemove(function (event) {
    "use strict";
    if ($(".sub-1").css("background-clip").toLowerCase() == "content-box") {
        $(".sub-1").parents(".main").addClass("active-2");
        $(".sub-1").parents(".main").css("background-color", "#CCC");
    } else {
        $(".sub-1").parents(".main").removeClass("active-2");
        $(".sub-1").parents(".main").css("background-color", "");
    }
});

The above code gives a blue line (class active-2) to the active element. In this case, "HOME". The variable itemscounts all the main menu items that are inactive and is used to switch the blue line ( active-2) from "HOME" when other items are hovering. So far so good.

Problem:

(-). - , (active-2) , , ​​ activeItem, "HOME" .

1 (, "" ), . ( "" ), . , , , , activeItem, . ul .sub-1 "" "" , .

mousemove

.addClass .hover .removeClass , ... , , ? , , , mousemove, CSS, , :

#menu li:hover > ul {
    left: auto;
    background-clip: content-box;
}

... , . , .

Edit:

CodePen .

+6
1

, CSS # 329 :

#menu li.main:hover > a:before, #menu .active > a:before {

JS :

var activeItem = $("#menu .active");

items.hover(function () {
    activeItem.toggleClass("active");
});
+2

More articles:


All Articles