Hallo, hab ein kleines Problem (mal wieder haha...) zwar habe ich eine Art hovereffekt geschrieben der auch einen effekt abfeuern soll wenn ich wieder mit der maus runter gehe 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 gegenteiige klasse die dann ausgelöst werden soll wenn ich mit der maus wieder runter gehe... hier die klassen :
Code
.hoveranimationon {
width: 70px;
height: auto;
border-radius: inherit;
animation: hovimation 1s ;
animation-iteration-count: 1 ;
animation-fill-mode: forwards ;
}
@keyframes hovimation{
0%{width: 70px;}
30%{width: 95px;}
100%{width: 95px;}
}
.hoveranimationoff {
width: 95px;
height: auto;
border-radius: inherit;
animation: hovimation2 1s ;
animation-iteration-count: 1 ;
animation-fill-mode: backwards ;
}
@keyframes hovimation2{
0%{width: 95px;}
30%{width: 70px;}
100%{width: 70px;}
}
Alles anzeigen
und hier das Script dazu
Code
<script>
let hover1 = document.getElementById("lol")
hover1.addEventListener("mouseover", function(e){
hover1.classList.toggle("hoveranimationon");
})
hover1.addEventListener("mouseout", function(e){
hover1.classList.toggle("hoveranimationoff");
})
</script>
Alles anzeigen
würd mich sehr freuen