Ich habe eine ol mit benutzerdefinierter Nummerierung mit :before.Wie li: vor und Link wenn Hover über Link?
Jede li enthält eine a.
HTML
<ol>
<li><a href="#">Sample text</a></li>
<li><a href="#">Sample text</a></li>
<li><a href="#">Sample text</a></li>
</ol>
Wenn ein Benutzer den Link schwebt über ich sowohl die Verbindung und die individuelle Nummer ändern Farbe wünschen.
Problem:
Da die :before dem Mutter gehört (die li), schweben Ereignisse auf den Link nicht ausrichten können.
Versuchte Lösung:
Ich habe einen Hover-Effekt auf den li statt. Dies ermöglicht jedoch einen Hover, der außerhalb der der Verknüpfung ist, um eine Änderung der Farbe (d. H. Nicht direkt darüber) zu verursachen.
Das Ändern der li zu display: inline-block verwirrt die Formatierung.
Gibt es eine einfache Möglichkeit, die Farbe des sowohl den Link und das Pseudoelement zu ändern, wenn der Link schwebt über ist?
Der HTML-Code kann bei Bedarf leicht geändert werden.
Snippet
body {
width: 700px;
margin: 0 auto;
}
pre {
background-color: lightgrey;
padding: 4px;
}
ol {
list-style: none;
counter-reset: item;
}
ol li {
margin-left: 2em;
}
.inline li{
display: inline-block;
}
ol li:before {
display: inline-block;
content: counter(item) " ";
counter-increment: item;
margin-left: -2em;
width: 2em;
}
a {
color: #000;
text-decoration: none;
}
li:hover {
color: red;
}
li:hover a {
color: red;
}<p><pre>display: block</pre> - causes hover effect outside of link </p>
<ol>
<li><a href="#">Sample text</a></li>
<li><a href="#">Sample text</a></li>
<li><a href="#">Sample text</a></li>
</ol>
<hr />
<p><pre>display: inline-block</pre> - organises list in a row
<ol class="inline">
<li><a href="#">Sample text</a></li>
<li><a href="#">Sample text</a></li>
<li><a href="#">Sample text</a></li>
<li><a href="#">Sample text</a></li>
<li><a href="#">Sample text</a></li>
</ol>
Ist es notwendig, dass die Nummer, die Sie hinzufügen, nicht Teil des Links ist? Wenn nicht, könntest du einfach das: vorher vom li-Tag zum a verschieben. –
@KristenVogler Nein, die Nummer muss nicht Teil des Links sein. Das ist ein gültiger Punkt, aber ich bin mir nicht sicher, wie es semantisch funktionieren würde. Würden die Zahlen auf die gleiche Weise zunehmen? Ich muss vielleicht etwas hinzufügen: vor jedem Anker ... – sol
stimme ich zu. Das Setzen der Zahl auf den Anker ist die logische Schlussfolgerung. Selbst wenn Sie den Hover-Effekt erhalten, um die Zahlenfarbe mit dem 'li' zu ändern, besteht die Gefahr, dass die Benutzer die falsche Nachricht senden. Ich nehme an, der Hover ist ein Indikator für Interaktivität. Wenn Sie die Maus über die Zahl bewegen, wird die Farbe geändert. Wenn Sie jedoch darauf klicken, wird keine inkonsistente Benutzererfahrung erzeugt. –