Frage Kann ein Div verschwinden, wenn in ein daruntergelegenem Input-Feld geschrieben wird?

[Matthias]

Hallo,

ich habe eine externe Seite per iframe eingebunden.
Die externe Seite ist auf Deutsch und ich brauche einige Stellen auf Englisch.
Eine Übersetzung der eingebundenen Seite braucht leider noch einige Zeit.
Daher probiere ich es gerade mit anderen Lösungen.

Über die entsprechenden Stellen im iframe habe ich divs mit der Übersetzung gelegt.

Problematisch sind die Eingabefelder: https://gyazo.com/320fabfdc646d47ad1af6ca191dd54c9

Diese sind nicht mehr anklickbar, wenn ich ein Div mit Übersetzung drüberlege.
Lege ich ein Div mit pointer-events:none drüber, kann ich zwar durchklicken, aber der übersetzte Text verschwindet beim Input nicht,
wenn etwas eingegeben wird. Siehe hier: https://gyazo.com/30532c6eeb02f885fa44f74654f7b1c4

Gibt es eine Möglichkeit den übergelegten Div verschwinden zu lassen, wenn durch ihn durch in das darunterliegende Input-Feld geschrieben wird (nicht geklickt, da das Klicken noch nicht zum Verschwinden des Originaltextes führt)?

Danke

 

[basti1012]

Könntest du mal ein Link posten oder dein Code mal posten bzw ein Codepen fertig machen ?
Dann kan man sich das besser vorstellen und auch sehen wie du das alles aufgebaut hast

 

[Matthias]

<div style="width: 400px; height:3250px; position:relative">
    <iframe <iframe id='iframe-traslator' onload='document.getElementsByClassName("mod-orange").disabled = false;' src="https://www.externeurl.com" width="400px" height="3250px" position="relative"></iframe>

    <div style="position:absolute; top:28%; left:0; width:100%;height:200px;background-color: white;"><p style="margin-left:50px;">Übersetzung</p></div>

<div style="position:absolute; top:23.7%; left:0; width:100%;height:25px;background-color: rgba(255, 0, 0, 0.2); pointer-events:none;"><p style="margin-left:50px;">Name</p></div>
</div>