Whenever I hover over the navigation links section, my overlay should display as a white section and the font color needs to change to white. Currently, the navigation does show a white section overlay on hover, but changing the font color has been elusive. I would also like to shift the overlay downwards, which is proving challenging.
<body>
<div class="header">
<div class="top-line">
<h5>Buy now & pay later with Afterpay</h5>
</div>
</div>
<div class="container">
<div class="info">
<div class="left">
<img src="https://i.ibb.co/wsCyQ98/Coozy-Shoes-removebg-preview.png" alt="logo">
</div>
<div class="middle-side">
<a href="#">Shoes</a>
<a href="#">Sale</a>
<a href="#">Our Team</a>
</div>
<div class="right-side">
<a href="#">Account</a>
<a href="#"><i class="fa fa-search" style="font-size:36px"></i>
</div>
</div>
<div class="title"></div>
My attempts at selecting the anchor tag along with the .title class have not been successful as the anchor tags do not appear. Additionally, trying to move the overlay section down by setting the top property to 10px does not produce the desired effect.
.title {
height: 150px;
background-color: white;
position: absolute;
top: 10px;
color: white;
width: 100%;
font-size: 25px;
/*padding-top: 20px;
padding: 15px 0;*/
text-align: center;
z-index: -1;
transition: 0.8s;
}
.container:hover .title, a {
z-index: 0;
color: black;
}