Anmol Ratan Mohla Anmol Ratan Mohla - 5 months ago 32
Javascript Question

How to change Navigation and on hover tooltip background color in one page website

I used a scroll navigation bar in my one page site. Here is example of my Navigation bar.


<ul id="menu-center">
<li class="test">
<a href="#test" data-scroll="top"></a><span>First</span>
<li class="test2">
<a href="#test2" data-scroll="news"></a><span>Second</span>
<li class="test3">
<a href="#test3" data-scroll="products"></a>
<section class="one" id="test">1</section>
<section class="two" id="test2">2</section>
<section class="one" id="test3">3</section>


*:before {
box-sizing: border-box;
body {
box-sizing: border-box;
margin: 0px;
padding: 0 0 300px;
section {
height: 300px;
margin: 1px;
background: red;
} {
background: #fff;
section.two {
background: #ff0;
ul {
position: fixed;
right: 50px;
li {
list-style: none;
width: 15px;
height: 15px;
position: relative;
display: block;
li a {
display: block;
width: 14px;
height: 14px;
background: transparent;
border-radius: 100%;
border: 1px solid #ccc;
color: white;
text-decoration: none;
li a:hover {
background: #000;
li span {
display: none;
li:hover span {
display: block;
position: absolute;
top: 0px;
left: -68px;
background: #000;
color: #fff;
width: 50px;
height: 18px;
line-height: 18px;
padding: 0 4px;
font-size: 13px;
li:hover span::before {
border-bottom: 8px solid transparent;
border-left: 8px solid #000;
border-top: 8px solid transparent;
content: "";
height: 0;
right: -8px;
position: absolute;
top: 0;
width: 0;

If you see in example Nav dot and on hover tool tip in black background color.

Now i want if i scroll nav in second screen (yellow) then dot and hover tool tip background color change to different color.

How is possible i am tried to change with css and jquery but i am failed?

Please help me with example How to change background color nav dot and on hover tool tip background color when i scroll page?

*Sorry for my English. Demo


Try " + " sign for multiple li hover css like below for yellow color:

Only change the color what you have want:


li + li:hover a {
  background-color: yellow;
li + li:hover span::before {
  border-bottom: 8px solid transparent;
  border-left: 8px solid yellow;
  border-top: 8px solid transparent;
li + li:hover > span {
  background-color: yellow;
  color: black;
li + li + li:hover a {
  background-color: black;
li + li, li + li a:hover {
  background: yellow none repeat scroll 0 0;
li + li + li, li + li + li a:hover {
  background: black none repeat scroll 0 0;

SEE Fiddle Demo