zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden :hover:after Text springt hin und her

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 31.03.2018, 16:40
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 12.11.2010
Ort: Bad Langensalza
Beiträge: 733
gabischatz ist in Verruf geraten
Standard :hover:after Text springt hin und her

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 01.04.2018, 00:58
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 145
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

ich habe mal etwas rum gesurft und hin und her geklickt,aber ich konnte keine Fehler finden.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 01.04.2018, 11:24
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 12.11.2010
Ort: Bad Langensalza
Beiträge: 733
gabischatz ist in Verruf geraten
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 03.04.2018, 08:26
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.039
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

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.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:20 Uhr.