Sieh dir das jsFiddle an.
Der orangefarbene Balken dient als Fortschrittsbalken, wobei der Wert unter dem Kreis angibt, wie hoch der Fortschrittsbalken sein soll.
Irgendeine Idee warum die overflow:hidden; ignoriert wird und wie löst man dieses Problem? Offensichtlich sollte nichts außerhalb des Kreises gehen.
Gibt es dafür auch eine bessere Lösung?
Modifizierte deine Geige ein bisschen. Hier ist der Link
Änderungen:
% Co_de% css zu .outerContainer von display:block geändert und display:table zu margin-top:30px css hinzugefügt
Überprüfen Sie, ob dies für Sie funktioniert.
position: absolute und overflow: hidden scheinen nicht gut mit display: table/table-cell zu spielen. Durch das Entfernen des Tabellenmaterials, das Sie dort hatten, um den Text vertikal zu zentrieren, wird das Problem behoben. Zumindest in Firefox.
Ich denke, es ist die Browser-Sache ...
Dies ist die CSS3-Version ...
%Vor%Es blinkt nicht mehr, weil der Browser den Job bearbeitet (keine js-Schleifenanimation ...). Aber es zeigt immer noch den Rand auf Animationsende !!! Das könnten die Browserdinge sein ... Könnte ein Bug sein ...
Dies bezieht sich nicht auf jQuery oder irgendein Javascript. In der Tat, wenn Sie alle Ihre Javascript löschen und die Höhe Ihrer .progressBar mit CSS auf li: Hover ändern, werden Sie den Fehler trotzdem bemerken.
Es scheint sich um ein Browser-Problem zu handeln, wie berichtet wurde: Ссылка
Um dieses Problem zu umgehen, fügen Sie dem Maskenelement eine nicht wahrnehmbare css-Transformation hinzu:
%Vor% Sie müssen nur Ihre .outerContainer -Klasse ändern und es funktioniert gut!
Platzieren Sie die Level-Klasse im outwardContainer-div und stylen Sie den Bereich in der level-Klasse relativ zueinander. Im JavaScript, um den Level zu berechnen, dividiere durch 10 anstelle von 100 für den perfekten kreisförmigen Hover-Effekt.
Hier ist eine Geige .
HTML
%Vor%CSS
%Vor%JS
%Vor% display: table funktioniert mit der CSS-Positionierung nicht so gut;
Sie sollten dies vermeiden und eine andere Möglichkeit finden, Ihre Etiketten vertikal zu zentrieren.
Wenn Ihre Kreise eine bekannte Höhe haben, wie Ihr Code anzeigt ( height:96px ecc), dann verwenden Sie einfach eine feste obere Position für ein absolute ly positioniertes <p> element:
Beachten Sie, dass Sie dafür nicht einmal jQuery benötigen, es ist alles nur mit CSS3 möglich (es sei denn, Sie richten sich an alte Browser)
Tags und Links javascript jquery css css3