Событие onmouseover

[ureech]

Вернее класс добавляется только в classList так

if(!obj[0].classList.contains('on')){
                            obj[0].classList.add('on');
                            //console.log(obj[0])
                        }

Но в html тег не добавляется

[ureech]

Понятно. Оказывается добавляется, но не к тому элементу,какому надо. К последнему.

[ureech]

С этим разобрался. Нужно было инициировать объект при mouseover

[ureech]

С mouseover вроде решил.

$(list[i]).on("mouseover", function (e) {   
                        var obj = $(this).parent();    
                        if(!this.classList.contains('icon'))return;
                        if(!obj[0].classList.contains('on')){
                            obj[0].classList.add('on');                           
                        }
                    });

На mouseout теперь застрял)

[ureech]

Ну вроде разобрался. Проблема в том, что после ухода курсора с блока тот не хочет пропадать.

[ureech]

Так и не победил. Повесил на клик по body. Вот весь код.

<style>
.list
{
  opacity: 0;
} 
.on .list{
transition: cubic-bezier(1,0,0,0) 1s;
    opacity: 1;
}
</style>
 
<div class="icons">
<div class="icon"><img... /></div>
<div class="list " id = "list_id">....</div>
</div>

var list = document.querySelectorAll('.icons');
        var count = list.length;
        var i = 0;
        for (i; i < count; i++) {
            var obj = list[i].children;// Все иконки
            $(obj[0]).on("mouseover", function (e) {
                var h6 = $(this).parent(); // Родитель выбранной иконки
                h6[0].classList.add('on'); // Делаем видимым блок

            });

            $(obj[0]).on("mouseout", function (e) {
                var h6 = $(this).parent();
                var next = $(this).next()[0] // Сам блок
                var mouse = document.elementFromPoint(e.clientX, e.clientY);
                if (mouse == next) {
                return;
                }
                else if ($(this)[0]) {
                    h6[0].classList.remove('on');
                }

            });
        }
        $('body').on("click", function (e) {
            $('.icons').removeClass('on');
        })