Показать сообщение отдельно
  #16 (permalink)  
Старый 04.06.2022, 15:14
Профессор
Отправить личное сообщение для ureech Посмотреть профиль Найти все сообщения от ureech
 
Регистрация: 11.03.2013
Сообщений: 778

Так и не победил. Повесил на клик по 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');
        })

Последний раз редактировалось ureech, 04.06.2022 в 15:17.
Ответить с цитированием