Currently working on designing a navbar, where each button consists of a <div> for the box and an anchor tag for text along with a hyperlink.
The challenge I'm facing is changing the color of the div when hovering over it. Adding a :hover pseudo-class in CSS only impacts the color change when hovering over the anchor tag itself, not the entire div. As a result, the box's color changes only when the text is hovered over.
To achieve the desired effect, I have to duplicate all styles from the normal div to the hover div. This is necessary as modifying only the color property affects only the text. (refer to the last image showing how the div looks with just a background-color property)
I hope this explanation was clear enough.
Code snippet and example provided below:
(within a <nav>)
<div class="menu">
<div class="mapbox"><a class="map" href="">Erangel</a><br></div>
<div class="mapbox"><a class="map" href="">Miramar</a><br></div>
<div class="mapbox"><a class="map" href="">Sanhok</a><br></div>
<div class="mapbox"><a class="map" href="">Vikendi</a><br></div>
<div class="mapbox"><a class="map" href="">Taego</a><br></div>
<div class="mapbox"><a class="map" href="">Karakin</a></div>
</div>
.map{
font-family: 'Rubik Mono One', Arial;
font-size: 1vw;
color: white;
text-decoration: none;
text-shadow: 0.125vw 0.125vw #282b30;
}
.mapbox{
display: flex;
justify-content: center;
align-items: center;
background-color: #424549;
border-radius: 1vw;
width: 12.5vw;
height: 2vw;
margin: auto;
margin-bottom: 0.85vw;
box-shadow: 0.225vw 0.225vw #1e2124;
}
.mapbox:hover{
display: flex;
justify-content: center;
align-items: center;
background-color: #7289da;
border-radius: 1vw;
width: 12.5vw;
height: 2vw;
margin: auto;
margin-bottom: 0.85vw;
}
https://i.sstatic.net/RlRrr.png https://i.sstatic.net/CQ4Gn.png https://i.sstatic.net/g28pB.png