Anmol Ratan Mohla Anmol Ratan Mohla - 6 months ago 39
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.
Demo

HTML

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


CSS

*,
*:after,
*:before {
box-sizing: border-box;
}
body {
box-sizing: border-box;
margin: 0px;
padding: 0 0 300px;
}
section {
height: 300px;
margin: 1px;
background: red;
}
section.one {
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.active,
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

Answer

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

Only change the color what you have want:

CSS:

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 a.active, li + li a:hover {
  background: yellow none repeat scroll 0 0;
}
li + li + li a.active, li + li + li a:hover {
  background: black none repeat scroll 0 0;
}

SEE Fiddle Demo

Comments