Ich habe einen Link <a class="link-articles" href="#articles">My Articles</a>Wie mache ich einen gestrichelten Unterstreichlink beim Hover?
und mein css .link-articles { text-decoration: underline; color: blue; }
jedoch auf schweben würde ich ein rot unterstrichenen statt blau unterstrichen haben möchte, aber der Text sollte auf rot, blau und nur der Unterstrich die Farbe wechseln bleiben .
Wie so etwas zu tun?
Da Sie nicht bezeichnen kann, eine Strategie ist, um es zu entfernen und einen Rahmen zu verwenden.
.link-articles
{
border-bottom: solid 1px blue;
text-decoration: none;
}
.link-articles:hover
{
border-bottom-color: red;
}
Beachten Sie, dass, wenn Sie die text-underline verlassen, wird es nach unten verschieben, wenn schweben, da es die Platzierung ist nicht genau die gleiche Position wie die untere Grenze.
Dieser Ansatz hat einen zusätzlichen Vorteil des Unterstrich zu
Position der Lage ist, durch Verwendung von
Alternate Line Arten, von line-height und
solid mit dotted oder dashed ersetzen.
Borderless Ansatz:
Wie @Pacerier in den Kommentaren weist darauf hin, hier ist eine alternative Strategie Pseudo-Klassen und CSS-Gehalt (JSFiddle):
.link-articles
{
position: relative;
}
.link-articles[href="#articles"]:after
{
content: 'My Articles';
}
.link-articles:after
{
color: red;
left: 0;
position: absolute;
top: 0;
}
jedoch mit anti- Aliasing, kann es eine Farbmischung an den Textkanten haben. Wenn Ihnen der Gedanke, content in Ihrem CSS nicht manuell eingeben zu müssen, nicht gefällt, können Sie ein Attribut oder ein doppeltes Element verwenden.
Verwenden Sie eine Grenze:
.link-articles { text-decoration: none; border-bottom: blue 1px solid; }
.link-articles:hover { border-bottom: red 1px dotted; }
Verwendung border-bottom:
a:hover.link-articles {border-bottom: 1px dotted red; text-decoration: none;}
starten:
.link-articles{ text-decoration: none; border-bottom:1px dotted; border-color:blue; }
.link-articles:hover{ border-color:red; }
Der Stil :hover wird zum Festlegen des Stils verwendet, wenn der Benutzer die Maus über das Element platziert.
.link-articles { ... }
.link-articles:hover { ... }
Und Sie können die border-bottom Eigenschaft statt text-decoration für gepunkteten, gestrichelten und Breite Styling verwenden.
anzeigen unteren Rand auf schweben: die Farbe eine zweite Farbe für den Text unterstrichen
a.link-articles {
text-decoration: none;
border-bottom: 1px dotted blue;
}
a.link-articles:hover {
border-bottom: 1px dotted red;
}
Der Nachteil dieses Ansatzes ist, dass die Unterstreichung beim Schweben nach unten "verschiebt". jsfiddle.net/4dKFu – Quantastical
Ich löste dieses Problem, indem ich transparente untere Grenze machte. http://jsfiddle.net/4dKFu/1/ – Anoop
Ihre CSS ist falsch ...: Hover-Filter ist an zwei Stellen ..:/ –
.link-articles { text-decoration: none; border-bottom: 1px dotted blue; }
.link-articles:hover { text-decoration: none; border-bottom: 1px dotted red; }
habe meine Antwort aktualisiert: / –
Sie die CSS3 text-decoration-color Eigenschaft verwenden können, aber leider, die text-decoration-color Anwesen befindet sich in einem der gängigen Browsern nicht unterstützt.
Firefox unterstützt eine Alternative, die -moz-text-decoration-color Eigenschaft.
Referenz: http://www.w3schools.com/cssref/css3_pr_text-decoration-color.asp
Browser-Unterstützung: http://caniuse.com/#search=text-decoration-color
JSFiddle (Hat nicht funktioniert auf allen Browsern)
So ist die beste Art und Weise zu tun, ist immer noch die border-bottom CSS-Eigenschaft als zu verwenden Trick.
Wir ** können ** die Farbe angeben der Text unterstreichen, da es die gleiche Farbe wie der Text sein wird. Um zwei verschiedene Farben für die Schriftart und Unterstreichung zu haben, müssen wir ** einen neuen Text darüber überlagern, so dass die alte Textfarbe durch die neue Textfarbe abgedeckt wird. – Pacerier
Danke für die Klärung, @Pacerier. Ich habe meine Antwort aktualisiert, um einen Ansatz mit Text-Overlays einzubeziehen. Persönlich mag ich den Border-Ansatz, weil Sie die Positionierung mit 'line-height' feineinstellen können und verschiedene Rahmenstile wie' dotted' verwenden können. – Quantastical
Wie genau kann die Position der Linie mit 'line-height' gesteuert werden? Wenn ich in Safari teste, ist der Abstand der Linie vom Text nicht betroffen. Eine größere Zeilenhöhe als der umgebende Text vergrößert nur den Abstand zur nächsten Zeile. Eine kleinere Zeilenhöhe hat keinerlei Auswirkungen. Die Entfernung der Grenze vom Text ändert sich nie. Vielleicht funktioniert es in anderen Browsern, aber nur in kontrollierten Umgebungen wie Intranets. –