如何在一个页面网站中更改导航和悬停工具提示背景颜色

Question

我在单页网站中使用滚动导航栏。 如果您在片段中看到导航点和悬停工具提示的黑色背景颜色。

现在我想要如果我在第二个屏幕（黄色）滚动导航然后点和悬停工具提示背景颜色变为不同的颜色。

$(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 {
	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;
}

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

帮助我举例如何在滚动页面时更改背景颜色导航点和悬停工具提示背景颜色？

Answer 1

尝试使用“+”符号表示多个li hover css，如下所示为黄色：

只改变你想要的颜色：

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

见Fiddle Demo

Answer 2

我已经更新了你的jsfiddle代码。请注意以下链接：https://jsfiddle.net/yzq9zz9n/11/

我在标签有活动类时添加了css和jquery。 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 3

你应该选择a元素：

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

不是#menu-center：

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

对于第三个导航，您会错过工具提示文本，请更新为：

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

这是代码更新：Click here