Wie kann ich onmouseenter und onmouseleave dazu bringen, einen Bericht in Bezug auf ein Bild und nicht in Bezug auf das ⇐ JavaScript

[Guest]

Betrachten Sie ein img, das in einem div enthalten ist. (Siehe Beispiel unten.) Ich möchte, dass onmouseenter und onmouseleave ausgelöst werden, wenn der Zeiger in ein Bild eintritt und es verlässt, aber stattdessen werden sie ausgelöst, wenn der Zeiger eindringt und verlässt. .. der Container des Bildes?!? Wie behebe ich das?
Dinge, die funktionieren, aber für meine Zwecke ungeeignet sind:

• width: 100%; aus dem Stil des Containers entfernen
• object-fit: include; im Stil des Bildes ändern

Code: Select all

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

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

Code: Select all

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

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

Code: Select all

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