jquery - 如何更改一页网站中的导航和悬停工具提示背景颜色

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