Событие onmouseover
Привет.
Часть кода из цикла
<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 он у меня не пропадал? |
Цитата:
Если .icon - делать .list видимым. |
Как некая иллюстрация ранее сказанного...
<!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>
|
Цитата:
<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>
|
Всем большое спасибо. рони,
Я тоже начинал со стилями, но не знал, про такую +.opacity конструкцию). |
рони,
Но при таком раскладе при наведении мыши на невидимый блок,он становится видимым. |
ksa,
Цитата:
const o = document.querySelectorAll('.icons') и всё поместить в цикл.У меня не вышло.В FF вообще всё умерло. Даже alert() не работает. |
Цитата:
|
Цитата:
|
Думаю, что сложновато использовать данный способ в цикле. Так как нельзя перебрать 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' ?
});
}
|
| Часовой пояс GMT +3, время: 05:34. |