Ich habe ein Ankerelement, um das ich einen Rahmen zeichnen möchte, wenn der Cursor darüber bewegt wird. Das Problem ist, dass der Ankertext und alles rechts davon beim Zeichnen des Rahmens leicht nach rechts "springt".
Ich dachte, ich wäre schlau und würde den Anker mit einem Rand der Hintergrundfarbe (über "erben") so gestalten, dass ein Standardrahmen gezeichnet wird, wenn kein Hover vorhanden ist. Wenn der Benutzer den Mauszeiger bewegt, wird der rote Rand einfach über den Hintergrundrand gezogen und der Text sollte nicht nach rechts springen. Dieser Ansatz funktioniert jedoch nicht.
Der Hauptgrund , den ich veröffentliche, besteht darin, zu verstehen, warum meine Strategie, die geerbte Farbe zum Zeichnen des Rahmens zu verwenden, nicht funktioniert. Mit anderen Worten, warum wird kein Rand der geerbten Farbe gezeichnet? Zweitens möchte ich wissen, wie ich verhindern kann, dass der Text springt.
Hier sind die Stile und eine JSFiddle: https://jsfiddle.net/tlbaxter99/zoLr4m8j/6/
a:link, a:visited {
border: 1px solid inherit;
}
a:hover {
border: 1px solid red;
}
3 Antworten
Der Hauptgrund, warum ich etwas poste, ist zu verstehen, warum meine Strategie, die geerbte Farbe zum Zeichnen des Rahmens zu verwenden, nicht funktioniert. Mit anderen Worten, warum wird kein Rand der geerbten Farbe gezeichnet?
Es funktioniert nicht, weil 1px solid inherit ein ungültiger Wert ist:
Laut MDN können Sie das {{ X0}} Wert als Teil einer Kurzdeklaration (wie in Ihrem Fall). Hier ist das relevante, ausführliche Zitat:
Nur die einzelnen Eigenschaftswerte können erben. Da fehlende Werte durch ihren Anfangswert ersetzt werden, ist es unmöglich, die Vererbung einzelner Eigenschaften durch Weglassen zuzulassen. Das Schlüsselwort erben kann auf eine Eigenschaft angewendet werden, jedoch nur als Ganzes, nicht als Schlüsselwort für den einen oder anderen Wert. Das bedeutet, dass die einzige Möglichkeit, einen bestimmten Wert zu vererben, darin besteht, die Eigenschaft longhand mit dem Schlüsselwort erben zu verwenden.
Dies bedeutet, dass Sie die Eigenschaft longhand border-color verwenden müssen, um den Wert border-color zu erben:
a:link,
a:visited {
border: 1px solid;
border-color: inherit;
}
Zweitens möchte ich wissen, wie ich verhindern kann, dass der Text springt.
Wenn Sie die geerbte Rahmenfarbe nicht möchten, verwenden Sie einfach einen transparenten Rahmen, um den hinzugefügten Rand zu verschieben:
a {
border: 1px solid transparent;
}
a:hover {
border: 1px solid red;
}
Anstatt einen Rahmen zu verwenden, können Sie alternativ auch die Eigenschaft outline verwenden, um dem Element eine Gliederung hinzuzufügen, die die box model:
a:hover {
outline: 1px solid red;
}
Sie müssen die Anfangsposition auch über border mitteilen. Geben Sie also zunächst einen transparenten Rand und geben Sie den Raum ein.
body {
padding: 1em;
}
a:link,
a:visited {
border: 1px solid transparent;
}
a:hover {
border: 1px solid red;
}<p>
Hello <a href="">This is a link</a> and here is more text, <b>which doesn't move</b>.
</p>Jetzt wagt es sich nicht zu bewegen. :) Der Grund, warum inherit nicht funktioniert, ist, dass none der geerbte Wert ist und der Rand 0px ist. (Ich bin nicht sicher, aber das wird kompiliert.)
Versuchen Sie es mit anstatt zu erben
transparent
Dann sieht Ihre CSS-Klasse wie folgt aus
a:link, a:visited {
border: 1px solid transparent;
}
Dadurch wird sichergestellt, dass der Randbereich bereits belegt ist und beim Bewegen nicht weh tut