Событие 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' ?
});
}
|
Вернее класс добавляется только в classList так
if(!obj[0].classList.contains('on')){
obj[0].classList.add('on');
//console.log(obj[0])
}
Но в html тег не добавляется |
Понятно. Оказывается добавляется, но не к тому элементу,какому надо. К последнему.
|
С этим разобрался. Нужно было инициировать объект при mouseover
|
С 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 теперь застрял) |
Ну вроде разобрался. Проблема в том, что после ухода курсора с блока тот не хочет пропадать.
|
Так и не победил. Повесил на клик по 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');
})
|
| Часовой пояс GMT +3, время: 16:38. |