Seeking help to modify the color of my menu elements upon clicking on the "center" or "right" containers (reverting back when clicked again). Currently, the three lines in my menu are white, but I desire them to turn red when either of these containers is clicked.
HTML for menu and containers:
<div class="menu">
<div class="line"></div>
<div class= "container" id= "center">
<h1 style="color:white"><a>LOREM IPSUM<a/></h1>
</div>
<div class="container" id= "right">
<h1 style="color:white"><a>LOREM IPSUM</a></h1>
</div>
CSS for menu elements:
.menu .line {
height: 5px;
width: 40px;
background: #fff;
position: absolute;
top: 22.5px;
left: 5px;
-webkit-transition: all 250ms linear;
transition: all 250ms linear;
z-index: 100;
}
.menu .line:after, .menu .line:before {
content: ' ';
height: 5px;
width: 40px;
background: #fff;
position: absolute;
-webkit-transition: all 250ms linear;
transition: all 250ms linear;
}
.menu .line:before {
top: -10px;
}
.menu .line:after {
bottom: -10px;
}