I am currently in the process of coding a website for my job, and I am working on changing the text color when it is hovered over. However, there seems to be a break in my code causing the text not to highlight all at once. Any guidance or suggestions on how to improve this would be greatly appreciated.
function updatemenu() {
if (document.getElementById('responsive-menu').checked == true) {
document.getElementById('menu').style.borderBottomRightRadius = '0';
document.getElementById('menu').style.borderBottomLeftRadius = '5';
} else {
document.getElementById('menu').style.borderRadius = '0px';
}
} .column {
flex: 20%;
height: 130px;
padding: 10px;
margin: 5px;
text-align: center;
text-decoration: none;
}
.container {
display: flex;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
font-size: 20px;
text-decoration: none;
}
.container a {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
color: #977847;<div class='header'>
<div class="container">
<span class="column">
<a href=""> Address line one </a>
<br>
<a href=""> Address line two </a>
<br>
<br>
<a> Follow Us: </a> <a href="https://www.facebook.com/"><i class="fa-brands fa-facebook-f" ></i></a>
</span>
<div class="column">
<a> second column </a>
<a> This is second column of our grid system</a>
</div>
<div class="column">
<a> Third column </a>
<a> This is third column of our grid system</a>
</div>
</div>
</div>I have experimented with creating different classes based on the element, but due to being in a flexbox, the text only highlights when hovering over the entire section rather than just the text itself.
Despite trying to remove the breaks in the code with pre and white-space formatting, it has caused issues with the formatting of the header. Any assistance would be greatly appreciated. I have reviewed other solutions posted here and believe there may be an issue in my code that I have overlooked.