Как сделать на чистом js, чтобы при наведении на 1 элемент у остальных происходили те же изменения?

Question

[Евгений Стек]

Есть сверстанный div`aми гамбургер
и нужно написать на js скрипт, который будет изменять цвет на красный у всех 3 одновременно , при наведении на какой либо из них мышки
Использовать какие либо фреймворки типа jquery нельзя, только чистый js и сss.
Мои попытки успехом не увенчались, а это 9 часов человековремени, потому и пришел к вам, чтобы кто-то умный - назвал меня глупым и сказал, как сделать это за пару минут, заранее спасибо:)

<div class="menu">
            <div></div>
            <div></div>
            <div></div>
        </div>

.menu {
    float: right;
    padding: 8px 20px 0 0;
}
.menu div{
    border-radius: 4px;
    height: 13px;
    width: 66px;
    background-color: white;
    margin-bottom: 8px;
}

var x = document.querySelectorAll(".menu > div");
        x.addEventListener("onmouseover", myFunction);
        function myFunction() {
            document.querySelectorAll(".menu > div").style.backgroundColor = "red";
        }

Answer 1

[Stalker_RED]

Например так:
находим на странице меню, находим эти "куски гамбургера", на каждый из них вешаем обработчик
https://jsfiddle.net/tke4bx2w/

Или, если вас устроит наведение именно на меню а не на отдельные "куски", то всё еще проще и без js. Достаточно в css прописать .menu:hover https://jsfiddle.net/tke4bx2w/1/

Comments

[Евгений Стек]

Спасибо. Как я и говорил, пришел умный человек и решил мои муки строчкой кода, живите вечно