Ich habe das folgende Markup:
%Vor%Beim Hover möchte ich, dass der Text unterstrichen wird, aber nicht das font-awesome Icon. Ich weiß, dass du "text-decoration: none" auf dem Icon machen kannst (was funktioniert), aber wenn du auf den Textteil schwebst, fügt er immer noch die Unterstreichung zum Icon hinzu. Irgendwelche Ideen?
Ich habe einen Weg gefunden, dies ohne ein zusätzliches span-Tag zu machen, es funktioniert in jedem Browser, in dem ich es ausprobiert habe (FF / Chrome / Safari / Opera) ... außer IE8 (Ich habe auch nicht in IE 9 oder 10 getestet).
Erklären Sie einfach das Symbol als Anzeige: Inline-Block, keine Unterstreichung mehr bei Hover.
Beispiel: Ссылка
HTML:
%Vor%CSS:
%Vor%Ich habe das folgende Markup:
%Vor%Beim Hover möchte ich, dass der Text unterstrichen wird, aber nicht das font-awesome Icon. Ich weiß, dass du "text-decoration: none" auf dem Icon machen kannst (was funktioniert), aber wenn du auf den Textteil schwebst, fügt er immer noch die Unterstreichung zum Icon hinzu. Irgendwelche Ideen?
Ich habe einen Weg gefunden, dies ohne ein zusätzliches span-Tag zu machen, es funktioniert in jedem Browser, in dem ich es ausprobiert habe (FF / Chrome / Safari / Opera) ... außer IE8 (Ich habe auch nicht in IE 9 oder 10 getestet).
Erklären Sie einfach das Symbol als Anzeige: Inline-Block, keine Unterstreichung mehr bei Hover.
Beispiel: Ссылка
HTML:
%Vor%CSS:
%Vor%Jemand hat gerade geantwortet, aber seine Antwort gelöscht. Die Lösung war:
%Vor%Danke geheimnisvolle Person!
... aber wenn Sie den Mauszeiger über den Text halten, wird die Unterstreichung zum Symbol hinzugefügt. Irgendwelche Ideen?
Damit dies funktioniert, müssen Sie den Linktext in einem separaten Element (a span , idealerweise) enthalten:
Nun können Sie die text-decoration vollständig aus der Verknüpfung entfernen und sie nur der span (bei Hover) zuweisen:
Wenn Sie kein span-Element hinzufügen können (nehmen wir an, Sie haben nur Zugriff auf CSS), sollte es mit %code% auf Ihrem Icon-Element funktionieren.
Siehe: CSS-verknüpfte Bilder werden unterstrichen ("a" -Anzeige wird blockiert)
Fügen Sie einfach ein span-Tag in Ihren HTML-Code ein und Sie sollten es gut machen.
HTML:
%Vor%CSS
%Vor%Ich habe eine Klasse zu Ihrem Bereich hinzugefügt, da dies die Tags für zukünftige Bereiche nicht beeinflussen würde
Die einzige Möglichkeit, dies zuverlässig zu bewerkstelligen, besteht darin, text-decoration: none dem ersten Elternelement zuzuweisen, d. h. dem initialen a-Tag.
Wenn Sie kein span-Element hinzufügen können (nehmen wir an, Sie haben nur Zugriff auf CSS), sollte es mit float:left or right auf Ihrem Icon-Element funktionieren.
Siehe: CSS-verknüpfte Bilder werden unterstrichen ("a" -Anzeige wird blockiert)
Fügen Sie einfach ein span-Tag in Ihren HTML-Code ein und Sie sollten es gut machen.
HTML:
%Vor%CSS
%Vor%Ich habe eine Klasse zu Ihrem Bereich hinzugefügt, da dies die Tags für zukünftige Bereiche nicht beeinflussen würde
Tags und Links html css font-awesome