erpseboy erpseboy - 5 months ago 20
CSS Question

change background of underlying div on a hover

I am trying to achieve this: on hover of my a element in my nav change the background color of a .background, my code is like so:

<li><a data-scroll href="#contact">Contact</a></li>
</ul>
<div class="background"></div>
</nav>


However the color only changes when I tell the css to change the color on hover of the
ul
and if I tell to change it when I hover over an
a
with class
.header-about
it just won't do anything no matter what I try. I tried to be as clear as possible in explaining this.

Here is my whole mark-up:



.header-nav .background {
background: purple;
position: absolute;
width: 450px;
height: 550px;
top: 0;
transition: all 0.3s;
}

.header-nav ul .header-about:hover {
color: black;
}

.header-nav ul .header-about:hover + .background {
background: #2F94CC;
}

<nav class="header-nav text-left">
<ul>
<li><a data-scroll href="#about" class="header-about">About</a></li>
<li><a data-scroll href="#work">My work</a></li>
<li><a data-scroll href="#resume">Resumé</a></li>
<li><a data-scroll href="#contact">Contact</a></li>
</ul>
<div class="background"></div>
</nav>





I tried to be as clear as possible in explaining the problem.

Answer

You cannot select .background with CSS on hover of .header-about. However you can achieve this as follows:

$(function() {
  $('.header-nav ul a').hover(function() {
    $('.background').css('background', $(this).attr('data-color'));
  }, function() {
    $('.background').css('background', '');
  });
});
.header-nav .background {
  transition: all 0.3s;
  background: purple;
  position: absolute;
  width: 450px;
  height: 550px;
  z-index: -1;
  top: 0;
}

.header-nav ul li:hover {
  color: black;
}

.header-nav .background {
  background: #2F94CC;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<nav class="header-nav text-left">
  <ul>
    <li><a data-scroll href="#about" data-color="#f00">About</a></li>
    <li><a data-scroll href="#work" data-color="#0f0">My work</a></li>
    <li><a data-scroll href="#resume" data-color="#05f">Resumé</a></li>
    <li><a data-scroll href="#contact" data-color="#f00">Contact</a></li>
  </ul>
  <div class="background"></div>
</nav>

Comments