Wie ändere ich die Navigation und Hover Tooltip Hintergrundfarbe in einer Seite Website

Question

Ich habe eine Scroll-Navigationsleiste in meiner Seite Seite. Wenn Sie in Snippet Nav Punkt und auf Hover Tool Tipp in schwarzer Hintergrundfarbe sehen.

Jetzt möchte ich, wenn ich Nav im zweiten Bildschirm (gelb) scrollen, dann dot und Hover Tool Tip Hintergrundfarbe auf andere Farbe ändern.

$(document).ready(function() { 
 
    $(document).on("scroll", onScroll); 
 
    
 
    //smoothscroll 
 
    $('a[href^="#"]').on('click', function (e) { 
 
     e.preventDefault(); 
 
     $(document).off("scroll"); 
 
     
 
     $('a').each(function() { 
 
      $(this).removeClass('active'); 
 
     }) 
 
     $(this).addClass('active'); 
 
     
 
     var target = this.hash, 
 
      menu = target; 
 
     $target = $(target); 
 
     $('html, body').stop().animate({ 
 
      'scrollTop': $target.offset().top+2 
 
     }, 800, 'swing', function() { 
 
      window.location.hash = target; 
 
      $(document).on("scroll", onScroll); 
 
     }); 
 
    }); 
 
}); 
 

 
function onScroll(event){ 
 
    var scrollPos = $(document).scrollTop(); 
 
    $('#menu-center').each(function() { 
 
     var currLink = $(this); 
 
     var refElement = $(currLink.attr("href")); 
 
     if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { 
 
      $('#menu-center li').removeClass("active"); 
 
      currLink.addClass("active"); 
 
     } 
 
     else{ 
 
      currLink.removeClass("active"); 
 
     } 
 
    }); 
 
}

*, *: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 { 
 
\t display: block; 
 
\t width: 14px; 
 
\t height: 14px; 
 
\t background:transparent; 
 
\t border-radius:100%; 
 
\t border:1px solid #ccc; 
 
\t color: white; 
 
\t text-decoration: none; 
 
\t } 
 
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; 
 
}

<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>

mir hilft mit Beispiel Wie Hintergrundfarbe nav Punkt und auf schweben Werkzeugspitze Hintergrundfarbe zu ändern, wenn i Seite blättern?

Answer 1

Ich habe Ihren jsfiddle Code aktualisiert. Bitte diesen Link: https://jsfiddle.net/yzq9zz9n/11/

Ich habe css und jquery hinzufügen, wenn ein Tag aktive Klasse hat. CSS:

li.test2 a.active{ background:red} 
li.test3 a.active{ background:green} 
li.test2.active:hover span{ 
    background:red; 
} 
li.test2.active:hover span:before{ 
    border-left-color:red; 
} 
li.test3.active:hover span{ 
    background:green; 
} 
li.test3.active:hover span:before{ 
    border-left-color:green; 
} 

Answer 2

Sie sollten a Elementselektoreinrichtung:

$('#menu-center a').each(function() { 
//... 
}) 

Nicht #menu-center:

$('#menu-center').each(function() { 
//... 
}) 

für die dritte Navigation, verpassen Sie Tooltiptext, Update:

<li class="test3"><a href="#test3" data-scroll="products"></a><span>Third</span></li> 

Dies ist Code aktualisiert: Click here

Answer 3

Try "+" Zeichen für css mehrere li schweben wie unten für gelbe Farbe:

Nur die Farbe ändern, was Sie wollen:

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; 
} 

SEHEN Fiddle Demo