How can I make the "brand-logo" and all the li's on the right side of the nav change to black when hovering over the nav itself? The nav already changes to #FFF on hover:
Check out this CodePen for reference
Here is the HTML snippet:
<nav id="nav">
<div class="nav-wrapper">
<span id="logo-container" class="brand-logo">Example</span>
<div>
<ul class="right">
<li class="active"><a href="/">About</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="/portfolio">Portfolio</a></li>
<li><a href="/resume">Resume</a></li>
<li><a class="waves-effect email-btn" href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cda8b5aca0bda1a88daaa0aca4a1e3aea2a0">[email protected]</a>">email me</a></li>
</ul>
</div>
</div>
</nav>
And the CSS code:
body {
background-color: #222;
}
nav:hover {
background: #fff;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
color: #222;
}
nav .nav-wrapper {
position: relative;
height: 100%;
}
nav {
background: transparent;
-webkit-box-shadow: none;
box-shadow: none;
color: #fff;
width: 100%;
height: 90px;
line-height: 56px;
display: block;
}
nav .brand-logo {
position: absolute;
color: #fff;
display: inline-block;
font-size: 2.1rem;
padding: 0;
white-space: nowrap;
}
nav ul li.active {
background-color: rgba(0, 0, 0, 0.1);
}
nav ul a:hover {
background-color: rgba(0, 0, 0, 0.1);
}
nav ul li {
transition: background-color 0.3s;
float: left;
padding: 0;
}
nav ul a {
transition: background-color 0.3s;
font-size: 1rem;
color: #fff;
display: block;
padding: 0 15px;
cursor: pointer;
}
.right {
float: right;
}
ul:not(.browser-default) {
padding-left: 0;
list-style-type: none;
}
.email-btn {
background: transparent;
border: 1px solid #fff;
border-radius: 20px;
}
.waves-effect {
position: relative;
cursor: pointer;
display: inline-block;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
vertical-align: middle;
z-index: 1;
transition: 0.3s ease-out;
}
I have attempted adding "color: #222" to nav:hover, but it doesn't affect the text in the nav. Any suggestions are appreciated!
Thank you for your assistance!