Archiv-Modus von Basti1012 Lösungspage

Hallo, hab ein kleines Problem (mal wieder haha…) zwar habe ich eine Art hover Effekt geschrieben, der auch einen Effekt abfeuern soll, wenn ich wieder mit der Maus runtergehe, deswegen überhaupt javascript.. Aber ich habe das Problem, dass es nur bei jedem zweiten Mal drüber hovern erst funktioniert… warum ist das so und wie kann ich es lösen? :) Es sind Bilder in Kreisform … Sie sollen aufblenden dies geschieht mit einer CSS Animation in einer klasse.. Und eine gegenteilige klasse die dann ausgelöst werden soll, wenn ich mit der Maus wieder runtergehe…

Code

                                    
                                <!doctype html>
<html lang="de">
  <head>
<style>
  .helfer{
  width:100%;
  border:1px solid black;
  position:relative;
  height:30px;
  margin:30px 0;
}

.test{
  height:30px;
  width:50px;
  border:1px solid red;
  display:block;
}
.go{
  animation:los 2s both 1;
}
.back{
    animation:bac 2s both 1;
}
 
@keyframes los{
  0%{
margin-left:0px;
  }
  30%{
margin-left:20%;
  }
  100%{
margin-left:calc(100% - 50px);
  }
}


@keyframes bac{
  0%{
margin-left:calc(100% - 50px);
  }
  70%{
margin-left:20%;
  }
  100%{
margin-left:0px;
  }
}
  
    </style>

  </head>
  <body>

<div class="helfer"><div class="test">go</div></div>
<div class="helfer"><div class="test">go</div></div>
<div class="helfer"><div class="test">go</div></div>
<div class="helfer"><div class="test">go</div></div>
<div class="helfer"><div class="test">go</div></div>
<div class="helfer"><div class="test">go</div></div>

    
    
  </body>
  <script>
    ele=document.querySelectorAll('.helfer');
for(x=0;x<ele.length;x++){
    ele[x].addEventListener("mouseover", function(e){
        elem('back','go');
    });
    ele[x].addEventListener("mouseleave", function(e){
        elem('go','back');
    });
}
function elem(a1,a2){
     ele1=document.querySelectorAll('.test'); 
       for(x1=0;x1<ele1.length;x1++){
         ele1[x1].classList.remove(a1);
         ele1[x1].classList.add(a2);
       }
}

    </script>
</html>

basti1012.bplaced.net

Toggle nur jedes zweite mal 2

Code