:hover:after Text springt hin und her

gabischatz · #1 (**permalink**) 31.03.2018, 16:40

Hi, ich habe mir z.B. diese Abkürzung erstellt und mit dem nachfolgenden Code gestylt. Nun hat das aber an manchen Stellen den Effekt, dass der Text aufgeregt hin und herspringt.
Kann man das springen irgendwie verhindern?

HTML-Code:

<abbr data-title="beziehungsweise">bzw.</abbr>

HTML-Code:

[class="abbr"]:hover:after,
abbr:hover:after {
    content: attr(data-title);
    background: #333;
    border-radius: 6px;
    bottom: 0px;
    color: #fff;
    left: 3px;
    padding: 5px 15px;
    position: relative;
    z-index: 3;
    display: inline-block;
}

MfG Lutz

basti1012 · #2 (**permalink**) 01.04.2018, 00:58

ich habe mal etwas rum gesurft und hin und her geklickt,aber ich konnte keine Fehler finden.

gabischatz · #3 (**permalink**) 01.04.2018, 11:24

Danke Basti, ich habe bei es fiddle auch ausprobiert. Da tritt der Fehler nicht auf. Jetzt habe ich es so gemacht wie in developer.mozilla.org beschriben.
Ich bin aber mit dem Ergebnis auch nicht zufrieden, da am Rand nicht alles angezeigt wird.
Schönen Ostersonntag

cloned · #4 (**permalink**) 03.04.2018, 08:26

Das kommt daher, da es absolut positioniert ist. Eine Lösung für dein Problem würde sein, mit Javascript den zur Verfügung stehenden Platz auszurechnen und dem Element dann diesen Wert als max-width zu geben.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Navigations-Leiste wird nicht richtig angezeig.	vaporizzle	CSS	5	05.02.2014 16:29
gibt es eine andere Lösung ohne Tabelle?	online	CSS	16	24.04.2009 08:41
Floats verschwinden im nichts, Fließer überdecken Floats.	nick	CSS	5	09.02.2008 14:34
Problem mit div und Höhe	deep4	CSS	2	13.11.2007 20:03
3 dynam. Spalten mit Inhaltsüberlauf	spacegaier	CSS	6	12.10.2007 00:24