Javascript event nur auf überliegendem Element ausführen

Hallo Leute,

ich versuche ein Event auszuführen

<div id="test" style="width:1000px;height:100px;">
    <div id="edge5" class="panel panel-default b-a-0 bg-warning" style="top: 50px; left: 55px; position: absolute; width: 250px; background:blue;">
        test
    </div>
</div>

Ich möchte eine beliebige Funktion ausführen, wenn die Maus über dem Hintergrund des Elements mit der ID ="test" liegt.

var test = document.getElementById("test");
content.addEventListener("mousemove", event => {
  console.log("1");
});

Da dass Element mit der ID "edge5" auch in dem Element mit der ID "test" liegt, wird die funktion natürlich auch ausgeführt, wenn ich mit der Maus über dass Element "edge5" gehe.

Das möchte ich jedoch nicht. Die Funktion soll nur ausgerufen werden, wenn ich mit der Maus durch das Überliegende Element streife, das andere jedoch nicht berühre.

Ist dass möglich und wenn ja wie?

Danke für die Hilfe

Zitat von basti1012

da id test das ElternElement ist reagiert das Event natürlich auch wenn man über Id Edge5 geht.

Weil ist ja gleichzeitig die test Id die du mit der Mouse hoverst.

Kannst du die Container ändern ?

Also die html anordnung ?

Die Anordnung ist leider nicht Änderbar

Zitat von Sempervivum

Ja, das ist möglich und zwar indem Du das Event-Bubbling durch Aufruf der Funktion stopPropation() für das #edge5 unterbindest:

Code

        var inside = document.getElementById("edge5");
        inside.addEventListener("mousemove", event => {
            event.stopPropagation();
        });

Danke insofern es nicht anders möglich ist werde ich es so umsetzten