Неправильная область функции ввода мыши за пределами обозначенной области? ⇐ Javascript

[Anonymous]

Итак, я разрабатываю элемент/код в js и html, который делает так, что при наведении курсора на класс с именем «img_container_invis» появляется значок комментария, но даже если все должно быть установлено правильно, значок комментария активируется, когда вы наводите курсор на класс с именем «picture_batch_container», который содержит img_container_invis. Я пробовал перемещать элементы div и img, переназначать идентификаторы и комментарии к данным, ничего не помогает.
Повторяю: проблема в том, что когда мышь входит в Picture_batch_container, вместо значка комментария появляется значок комментария, когда мышь входит в img_container_invis.
вот фрагмент.
/>

Код: Выделить всё

const imgCommentIcon = document.getElementById('img_comment_icon');

document.querySelectorAll('.picture_batch_container_img').forEach(function(img) {
const container = img.parentElement;

container.addEventListener('mouseenter', function() {
imgCommentIcon.src = img.dataset.comment;
imgCommentIcon.style.display = 'block';
});

container.addEventListener('mouseleave', function() {
imgCommentIcon.style.display = 'none';
});
});

Код: Выделить всё

.picture_batch_container {
display: grid;
height: 600px;
width: 600px;
border: 5px solid red;
background-color: grey;
margin: auto;
}

.picture_batch_container_img {
width: 200px;
height: 200px;
object-fit: contain;
}

.img_container_invis {
position: relative;
display: inline-block;
}

#img_comment_icon {
width: 30px;
height: 30px;
font-size: 10px;
font-family: consolas;
position: absolute;
display: none;
text-shadow: 0px 0px 5px black;
object-fit: contain;
}

Код: Выделить всё

[img]300by300.webp[/img]
[img]comment.png[/img]

Подробнее здесь: https://stackoverflow.com/questions/798 ... nated-area