JavaScript - 选项栏底色跟随鼠标移动而变化_网页鼠标移动菜单变化-优快云博客

本文链接：https://blog.youkuaiyun.com/godfreyyyy/article/details/123739038

本文介绍如何使用JavaScript实现选项栏的底色随着鼠标移动而变化的效果。核心代码中提到了一个名为'move'的缓动函数，配合CSS和HTML框架，实现了底色变化的同时，当红色块位于文字下方时，文字会自动变为白色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果

埋坑：这里如果能实现，除了鼠标hover的情况下，文字也能变白色就好了。也就是只要红色块在文字底下，文字就会变白色的效果。

回答：最底部有修改后的全部代码

核心代码

 //获取元素
        var c_nav = document.querySelector('.c_nav');
        var cloud = document.querySelector('.cloud');
        var lis = c_nav.querySelectorAll('li');

        //当鼠标经过某个li，就把current类（变红加下划线赋予给它）
        for (var i = 0; i < lis.length; i++) {

            var current = 0; //声明一个变量记录当前红色块的位置
            lis[i].addEventListener('mouseenter', function () {
                move(cloud, this.offsetLeft);
            })

            lis[i].addEventListener('mouseleave', function () {
                move(cloud, current);
            })

            lis[i].addEventListener('click', function () {
                current = this.offsetLeft; //如果被点击，就修改current值，让红色块的初始位置是点击的这个位置
                move(cloud, this.offsetLeft);
            })


            //注意mouseover支持事件冒泡，而mouseenter不支持，这里我们不希望鼠标在li里面移动时，事件被频繁触发，所以使用mouseenter
        }

move()是实现封装的缓动函数，代码如下：

 function move(obj, target, callback) {
            // 清除多次点击后的定时器，保留最新的那一次
            clearInterval(obj.timer);

            //  使用obj.timer，把timer当作obj的属性，如果使用var timer = ，调用一次就会开辟一次内存空间
            obj.timer = setInterval(function () {
                //对步长向上取整，因为除以10可能有小数
                var step =