Code for simple Rollover Effect in Visual- or Text-Editor

Hi,

have a problem with an simple rollover effect added in the Visual-/Text-Editor.

The aim is simply:
see image#1 > mouseover/rollover > automatic see image#2
> if click now on hover-image#2 > open link in a new tab.

I have read that the WP Visual-/Text-Editors have problems with the good old html codes etc.

I was trying this

<a href="https://forwardinglink.net" target="_blank" title="TITEL"><img title="TITEL" onmouseover="this.src='
https://hover-imgage2.png';" onmouseout="this.src='
https://normal-image1.png';" src="
https://normal-image1.png" alt="TITEL"></a>

and this

<p><a title="TITEL" href="https://forwardinglink.net" target="_blank"><img class="aligncenter" title="TITEL" onmouseover="this.src='https://hover-imgage2.png';" onmouseout="this.src='https://normal-imgage1.png';" src="https://normal-imgage1.png" alt="TITEL" /></a></p>

and my last hope was this. I was add this code in the Text-Editor:

<a id="roll_1" href="https://forwardinglink.net" target="_blank">TITEL</a>

then added CSS:

#roll_1 {display:block; width:160px; height:51px;background:url("https://www.blickfang-muenchen.de/wp-content/uploads/filez/PDF-Formular.png");}

#roll_1:hover{background:url("https://www.blickfang-muenchen.de/wp-content/uploads/filez/PDF-Formular_h.png");}

Nothing runs. What do I wrong.
I don′t want and also cannot use Tiny MCE or something Plugins for the Vusial/Texteditors. I only want to know the simplest compantible code which is 100% supported by WordPress.

Thank you friends.