Как добавить класс к div и убрать только при наведении на другой div

Question

Есть несколько элементов, при наведении на блок(A) нужно показать блок(B), но убрать блок(B), только тогда, когда мы наведем на блок(С), а при наведении на блок(С), показать блок(D)

Answer 1

    window.onload = function () {
        var parent = document.getElementsByClassName('text');

        for(let i=0;i<parent.length;i++){
            parent[i].addEventListener('click', function () {
                for(let z=0;z<parent.length;z++){
                    parent[z].children[0].style.display = "none";
                }
                this.children[0].style.display = "block";
            })
        }
    }

    .toogle{
        display: none;
    }

<div id="A" class="text">Нажми A
    <div id="B" class="toogle">Получим результат B</div>
</div>

<div id="C" class="text">Нажми C
    <div id="D" class="toogle">Получим результат D</div>
</div>

<div id="E" class="text">Нажми E
    <div id="F" class="toogle">Получим результат F</div>
</div>

Если необходимо при наведении:

   window.onload = function () {
        var parent = document.getElementsByClassName('text');

        for(let i=0;i<parent.length;i++){
            parent[i].addEventListener('mouseover', function () {
                for(let z=0;z<parent.length;z++){
                    parent[z].children[0].style.display = "none";
                }
                this.children[0].style.display = "block";
            })
        }
    }

    .toogle{
        display: none;
    }

<div id="A" class="text">Нажми A
    <div id="B" class="toogle">Получим результат</div>
</div>

<div id="C" class="text">Нажми C
    <div id="D" class="toogle">Получим результат</div>
</div>

<div id="E" class="text">Нажми D
    <div id="F" class="toogle">Получим результат</div>
</div>

БЛОГ НА HUSL

Как добавить класс к div и убрать только при наведении на другой div

Ответы (1 шт):