Форум

ureech · #1 (**permalink**) 03.06.2022, 12:14

Привет.

Часть кода из цикла

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

Мне надо при наведении на .icon показывать .list
Мой код

var list = document.querySelectorAll('.icon');
        var count = list.length;
        var i = 0;
        for (i; i < count; i++) {
            if (list[i]) {
                id = list[i].id;
                var b = $('#likers_' + id);
               if (b) {
                    $(list[i]).on("mouseover", function () {
                        var ch = this.parentNode.children[1];
                        $(ch).addClass('no-opacity');
                        $(ch).removeClass('opacity');
  
                    });
                    $(list[i]).on("mouseout", function () {
                        var ch = this.parentNode.children[1];
                        $(ch).addClass('opacity');
                        $(ch).removeClass('no-opacity');
                    });
}

}

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

ksa · #2 (**permalink**) 03.06.2022, 12:20

Сообщение от ureech

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

Как вариант - работать с событиями на icons и смотреть кто является таргетом.
Если .icon - делать .list видимым.

ksa · #3 (**permalink**) 03.06.2022, 12:40

Как некая иллюстрация ранее сказанного...

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
-->
<style>
.icons,
.icon {
	border: 1px solid;
}
.icon {
	width: 20px;
	height: 20px;
}
.list {
	display: none;
}
.on .list {
	display: block;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', _ => {
	const o = document.querySelector('.icons')
	o.addEventListener('mouseover', e => {
		if (!e.target.classList.contains('icon')) return
		if (!o.classList.contains('on')) o.classList.add('on')
	})
	o.addEventListener('mouseout', e => {
		const c = e.target.classList
		if (c.contains('icon')) return
		if (c.contains('list')) return
		if (o.classList.contains('on')) o.classList.remove('on')
	})
})
</script>
</head>
<body>
<div class="icons">
	<div class="icon"><img src='https://javascript.ru/forum/images/smilies/smile.gif' /></div>
	<div class="list opacity" id = "list_id">....</div>
</div>
</body>
</html>

рони · #4 (**permalink**) 03.06.2022, 12:45

Сообщение от ureech

Мне надо при наведении на .icon показывать .list

<body>
    <style>
        .opacity {
            opacity: 0
        }

        .list {
            transition: cubic-bezier(1, 0, 0, 0) 1s;
        }

        .icon:hover+.opacity,
        .opacity:hover {
            opacity: 1
        }
    </style>
    <div class="icons">
        <div class="icon"><img src="https://javascript.ru/forum/images/smilies/tongue.gif" /></div>
        <div class="list opacity" id="list_id">всякая хрень</div>
    </div>
</body>

ureech · #5 (**permalink**) 03.06.2022, 13:17

Всем большое спасибо. рони,
Я тоже начинал со стилями, но не знал, про такую +.opacity конструкцию).

ureech · #6 (**permalink**) 03.06.2022, 13:28

рони,
Но при таком раскладе при наведении мыши на невидимый блок,он становится видимым.

ureech · #7 (**permalink**) 03.06.2022, 14:00

ksa,

Сообщение от ureech

Часть кода из цикла

Поэтому тут наверное надо
const o = document.querySelectorAll('.icons') и всё поместить в цикл.У меня не вышло.В FF вообще всё умерло. Даже alert() не работает.

ksa · #8 (**permalink**) 03.06.2022, 15:54

Сообщение от ureech

тут наверное надо ...

Я, для примера, сделал с одним элементом.

ureech · #9 (**permalink**) 03.06.2022, 16:32

Сообщение от ksa

Я, для примера, сделал с одним элементом.

Я понял. Но в цикле у меня не получилось. Буду мучить)

ureech · #10 (**permalink**) 04.06.2022, 09:25

Думаю, что сложновато использовать данный способ в цикле. Так как нельзя перебрать document.addEventListener. Попробовал применить логику к своему примеру. Но никак не могу добиться добавления класса.

var list = document.querySelectorAll('.icon');
        var count = list.length;
        var i = 0;
        for (i; i < count; i++) {
            if (list[i]) {
        var obj = $(list[i]).parent();
        $(list[i]).on("mouseover", function (e) {

//Как тут к obj[0].classList добавить класс 'on' ?

         });
         }

Форум

Справочник

Discord чат

Курсы javascript