Farbliche hervorhebung von Textten bei a href
Hallo,
ich bin auf der Suche nach einem Befehl mit dem ich bei einer Definitionsliste mit farblich zum Beispiel das "A" hervorheben lassen kann, wenn ich oben in der Navigation leiste auf das a klicke.
Ich habe dem dt. vom Text eine ID zugegeben mit <dt id="b">
und habe oben in der dem HTML stehen, dass er zum b springen soll, wenn ich in der Navigationsleiste auf b klicke. Aber ich möchte auch noch, dass er es farblich hervorhebt.
<a href="#b"title="zum B springen">B</a>
hat jemand eine Idee wie ich das hinbekomme das dann das Wort beim B welches die ID bekam farblich z.B. Grün hervorgehoben wird damit man es in einr Auflistung leichter findet?
Der hier verwendete Code
<style>
*{
margin:0;
padding:0;
}
nav{
display:flex;
}
nav a{
flex:1;
border:1px solid lightgrey;
text-align:center;
padding:2px 10px;
}
.leer{
height:100vh;
}
.sprung{
font-size:30px;
}
#sprung1:target{
color:green;
}
#sprung2:target{
color:red;
}
#sprung3:target{
color:yellow;
}
dl{
counter-reset: liste1;
}
dt::before {
content: counter(liste1) ". ";
counter-increment: liste1;
color:red;
}
</style>
<body>
<nav>
<a href="#sprung1">Link 1</a>
<a href="#sprung2">Link 2</a>
<a href="#sprung3">Link 3</a>
</nav>
<dl>
<div class="leer"></div>
<dt class="sprung" id="sprung1">AA</dt>
<div class="leer"></div>
<dt class="sprung" id="sprung2">AAE</dt>
<div class="leer"></div>
<dt class="sprung" id="sprung3">AARP</dt>
<div class="leer"></div>
</dl>
</body>