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

Anmol Ratan Mohla 发表于 Dev

安莫尔·拉坦·莫拉（Anmol Ratan Mohla）

我在一页站点中使用了滚动导航栏。如果您在摘要Nav点和悬停工具提示中看到黑色背景色。

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

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

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

穆克什·拉姆（Mukesh Ram）

我已经更新了您的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;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。