Ich versuche, div beim Mouseover zu zeigen, aber es flackert, wie zeige / verstecke ich ohne Ruck und weiche mit dem Übergang?
Ich habe das Ein- / Ausblenden auch mit jquery versucht, aber immer noch blinkend.
Hier ist der Code
Es flackert, weil jedes Mal, wenn .back sichtbar wird, der Mauszeiger auf .front nicht mehr gültig ist. Um dies zu lösen, können Sie die Sichtbarkeit von .back als sichtbar auf .back:hover setzen, was mit dem gleichen css-Stil für .back:hover wie für .front:hover + .back
Das Problem ist, dass wenn Sie den Mauszeiger auf .front div bewegen, das .back div angezeigt wird, so dass Sie nun den .back div nicht die .front , so dass sie wieder verschwindet und die Schleife fortgesetzt wird.
Um dies zu beheben, fügen Sie den Hover-Effekt auch dem .back div hinzu.
Fügen Sie transition zu .back hinzu, um einen reibungslosen Effekt zu erzielen.
Was ist, wenn Sie .back element in .col element setzen, .front element styles in .col element verschieben und transition zu .col element? Ich denke, es ist eine bessere Lösung angesichts der Browser-Unterstützung.
Das Hauptproblem ist, dass Sie nicht wissen konnten, wer die "Animation" wirklich "schießt".
Sowohl front als auch back sind auf der gleichen Ebene, also ist es nicht möglich, es von dieser Ebene aus zu tun, aber wenn Sie es durch das Elternelement schießen, sollte es funktionieren.
Der Ansatz wäre wie folgt:
%Vor%Tags und Links javascript html css css3 css-transitions