For a project, I need to create a small navigation menu. This menu only has two links Accommodations
and Activities
. And I want to add some styling to these links, more precisely when I'm on the page of the link or I hover on the link, I want the corresponding link to change color and have a blue overline
like that.
To do that I tried to search the corresponding state, but I couldn't find it, neither :active
or :visited
could do what I wished for.
Here is my code:
header{
display: flex;
flex-direction: row;
justify-content: space-between;
padding-top: 32px;
}
.nav-button{
font-family: Raleway;
font-size: 14px;
color: black;
text-decoration: none;
margin: 16px;
}
.nav-button:hover{
color: #0065FC;
border-top: 2px solid #0065FC;
padding-top: 38px;
}
<header>
<nav>
<a href="#accommodations">Accommodations</a>
<a href="#activities">Activities</a>
</nav>
</header>
P.S: By the way, for this project I can only use HTML and CSS, so no JS.
CodePudding user response:
CSS has no pseudo-class meaning "The href attribute of this link matches the URL currently shown in the address bar".
The usual way get that effect you would need to use a programming language (either server-side or client-side) to add a class to the link, and then use a regular class selector.