Как мне заставить onmouseenter и onmouseleave сообщать об изображении, а не о содержащем его div? ⇐ Javascript

[Anonymous]

Рассмотрим img, содержащийся в div. (См. пример ниже.) Я бы хотел, чтобы onmouseenter и onmouseleave срабатывали, когда указатель входит и покидает изображение, но вместо этого они срабатывают, когда указатель входит и выходит. .. контейнер изображения?!? Как это исправить?
Вещи, которые работают, но не подходят для моих целей:

• удаление ширины: 100%; из стиля контейнера
• изменение соответствия объекта: contains; в стиле изображения

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

function mouse_entered() {
console.log("mouse entered!")
}

function mouse_left() {
console.log("mouse left!")
}

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

.image-container {
width: 100%;
height: 100vh;
}

.image {
width: inherit;
height: inherit;
object-fit: contain;
}

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

[img]https://lh3.googleusercontent.com/-s05ILbxi6YA/AAAAAAAAAAI/AAAAAAAAACc/yAd6W8jNSBI/photo.jpg?sz=256[/img]
     class="image"
onmouseenter="mouse_entered()"
onmouseleave="mouse_left()"
>

Подробнее здесь: https://stackoverflow.com/questions/793 ... n-image-ra