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

[Anonymous]

Итак, я разрабатываю элемент/код в js и html, который делает так, что при наведении курсора на класс с именем "img_container_invis" появляется значок комментария, но даже если все должно быть установлено правильно, значок комментария активируется, когда вы наводите курсор на класс с именем "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';
});
});

Это мой код на js выше, я новичок в js, так что он довольно хреновенький.









выше приведен мой HTML-код для кода/элемента на https://kipm4-test.neocities.org/element-list. Я пробовал перемещаться по элементам div и img, переназначать идентификаторы и комментарии к данным, похоже, ничего не работает. Повторюсь, проблема в том, что когда мышь входит в Picture_batch_container, вместо значка комментария появляется значок комментария, когда мышь входит в img_container_invis.
вот фрагмент.




.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;
}














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';
});
});






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