I have a traditional header, with a logo and links menu, I would like to switch the header colors based on the hover of each link in the menu.
h1 {
padding: 0;
margin: 0;
color: #fff
}
header {
padding: 0;
margin: 0;
}
.header-content {
background: grey;
padding: 30px;
}
.nav {
background: #333;
height: 60px;
position: relative;
}
.nav ul {
float: left;
}
.nav ul,
.nav ul li {
line-height: none;
padding: 0;
margin: 0;
}
.nav ul li {
display: inline-block;
position: relative;
vertical-align: top;
}
.nav ul li a {
display: block;
line-height: 60px;
text-decoration: none;
padding: 0 30px;
color: #fff;
}
.nav ul li a:hover {
color: #AAA
}
<header>
<div class="header-content">
<h1 class="logo">Header Colorido on Hover</h1>
</div>
<nav class="nav">
<ul>
<li class="menu-item" id="menu-item-1"><a href="#">Header Cinza</a></li>
<li class="menu-item" id="menu-item-2"><a href="#">Verde</a></li>
<li class="menu-item" id="menu-item-3"><a href="#">Azul</a></li>
<li class="menu-item" id="menu-item-4"><a href="#">Vermelho</a></li>
<li class="menu-item" id="menu-item-5"><a href="#">Gold</a></li>
<li class="menu-item" id="menu-item-6"><a href="#">Lime</a></li>
</ul>
</nav>
</header>
EDIT
From an early age, I'm researching this, I found something interesting, that I kept my mouth open, given its simplicity. It works, but not as expected, not with the entire html structure, it does not work if the links are inside another element, div, nav, header ...
codepen.io/johnquimera/pen/RyEOWB