HTML+CSS+JavaScript realisiert die Anzeige des ausgewählten Effekts nach der Mausbewegung

<div Klasse="Prozessliste-lpu">
                <div Klasse="Prozesslinie"></div>
                <div Klasse="Inhaltsliste">
                    <ul>
                        <li><a href="javascipt:;">Endkunde erhält Produkt<b>1</b></a> </li>
                        <li><a href="javascipt:;">Melden Sie sich auf der EFOSE-Website an und geben Sie die Installations- oder Wartungsanforderungen an <b>2</b></a></li>
                        <li><a href="javascipt:;">EFOSE bevorzugt Kontaktservicepunkt<b>3</b></a> </li>
                        <li style="margin-left:115px;"><a href="javascipt:;">Kundenkontakt-Servicestelle, um Service zu erhalten<b>4</b></a> </li>
                        <li><a href="javascipt:;">Der Kunde bezahlt die Rechnung direkt oder EFOSE übernimmt die Wartungskosten<b>5</b></a> </li>
                    </ul>
                    <div Klasse="klar"></div>
                </div>
            
            </div>

.line-lpu{ Höhe: 55px; Position: relativ; Breite: 100 %; Überlauf: versteckt;}
    .line-lpu span{ Breite:43px; Höhe:46px; Hintergrund:URL('https://www.efose.com/images/banners/lpu_03.png') keine Wiederholung; Position:absolut;oben:0;}
    .border-lpu{border-bottom:1px solid #959595; Höhe:23px; }
     .join-lpu li{ Breite: 19 %; Float: links; Rand rechts: 8px; Hintergrund: keiner; Polsterung: 0; }
    .join-lpu li a{ Anzeige: Block; Farbe: #606060; Textdekoration: keine; Rahmen: 1px durchgezogen #959595; Mindesthöhe: 215px; Polsterung: 10px; Position: relativ; Überlauf: ausgeblendet;} 
    .join-lpu li a:hover{border:1px solid #337ab7;}
    .join-lpu li b{ Schriftgröße:60px; Position:absolut; unten:7px; rechts:-1px; Schriftstil:kursiv; Farbe:#c7c7c7;}
    .clear{clear:both;}
    .step-lpu span{ Hintergrund: URL ('https://www.efose.com/images/banners/icon-lpu.png') keine Wiederholung; Anzeige: Block; Breite: 75px; Höhe: 65px; Rand links: 28px;}
    .step-lpu .icon0{ Hintergrundposition:0 0;}
    .step-lpu .icon1{ Hintergrundposition:0 -70px;}
    .step-lpu .icon2{ Hintergrundposition:0 -140px;}
    .step-lpu .icon3{ Hintergrundposition:0 -204px; Höhe:58px; Rand unten:7px;}
    .step-lpu .icon4{ Hintergrundposition:0 -260px;}

<Skripttyp="text/javascript">
        //AnimationHover-Objekt instanziieren window.onload = function(){
            var ah = neue AnimationHover();  
            ah.init();
        }; 
        //Label-Objektfunktion initialisieren animationHover(){
            dieser.Schritt = document.getElementById('Schritt');
            this.stepLi = this.step.getElementsByTagName('li');
            diese.Zeile = document.getElementById('Zeile');
            dies.attr = null;
            dieser.timer = null;
            dieses.ziel = null;
                            
            }
        //Ereignisanimation initialisierenHover.prototype.init=function(){
            Dies = dies;
            für(var i=0;i<this.stepLi.length;i++){
                dies.SchrittLi[i].index=i;
                //Ereignis an Li-Tag binden this.stepLi[i].onmouseover=function(e){    
                    var meinIndex=dieser.index;
                    Dies.onOver(Diese.zeile,(meinIndex*162+55));
                    };
                dies.SchrittLi[i].onmouseout=Funktion(){            
                   Diese.Linie.Stil.links=meinIndex*162+55+'px';
                    };    
                
                }
            };
        //Definieren Sie die Mausverarbeitungsfunktion animationHover.prototype.onOver=function(obj,target){
            Dies=dies;
            : ClearInterval(dieser.Timer);
            Dies.Ziel=Ziel;
            Timer = Intervall festlegen(Funktion(){
                var target=This.target; //Zielpunkt stoppen var attrValue=parseInt(This.getStyle(obj,'left')); 
                var dx=target-attrValue; //"Entfernung" vom Zielpunkt
                var Geschwindigkeit=1/10*dx;
                Geschwindigkeit=Geschwindigkeit>0?Math.ceil(Geschwindigkeit):Math.floor(Geschwindigkeit); 
                            //Durch Runden verursachtes Zittern verhindern if(target==attrValue) clearInterval(timer); 
                            //Wenn du den Zielpunkt erreichst, schalte den Timer aus, sonst{
                    obj.style.left=attrValue+Geschwindigkeit+'px';
                }
                },100);
                                    
            };
        //Den CSS-Attributwert des aktuellen Tag-Objekts abrufen animationHover.prototype.getStyle = function (obj, attr) {                    
            wenn (obj.aktuellerStil) {                
                returniere obj.currentStyle[attr];
            }anders{
                gibt getComputedStyle(obj,false)[attr] zurück;
            }
            };    
</Skript>