jQuery实现导航栏横线跟着鼠标移动

导航栏横线跟着鼠标移动

话不多说直接上代码 css样式

* { margin: 0; padding: 0; } .menu { width: 100%; display: flex; align-items: center; justify-content: center; } .menu .menu-item { position: relative; cursor: pointer; } /*设置导航栏横线的的样式*/ .menu .menu-item .wee { height: 5px; width: 100%; background-color: rgb(105, 224, 255); position: absolute; left: 0; top: 0; transition: 0.3s; } .menu .menu-item h6 { margin: 0; padding: 1rem; font-size: 1rem; color: #232323; transition: 0.3s; } /*悬浮到div时改变里面文字的颜色*/ .menu .menu-item:hover h6 { color: #002b75; } /*改变被选中的div里面的文字颜色*/ .menu .current-menu-item h6 { color: #002b75; }

HTML代码

<div class="menu"> <div class="menu-item"> <h6>Home</h6> </div> <div class="menu-item"> <h6>Contact</h6> </div> <div class="menu-item"> <h6>About</h6> </div> <!--当前被选中的div--> <div class="menu-item current-menu-item"> <h6>Blog</h6> <!--导航栏上的横线--> <div class="wee"></div> </div> <div class="menu-item"> <h6>Jobs</h6> </div> </div>

JS代码

$(".menu").ready(function () { //页面加载和窗口调整事件 $(window).on('load resize', function () { //获取class为.wee的标签距离文档左边的的偏移坐标 var $thisnav = $('.wee').offset().left; $('.menu-item').hover(function () { //当前元素距离文档左边的的偏移坐标减去class为.wee的标签距离文档左边的的偏移坐标 var $left = $(this).offset().left - $thisnav; //获取当前元素的外部宽度 var $width = $(this).outerWidth(); $('.wee').css({'left': $left, 'width': $width}); }, function () { var $initwidth = $('.current-menu-item').width(); $('.wee').css({'left': '0', 'width': $initwidth}); }); $('.menu-item').click(function () { $('.menu-item').removeClass('current-menu-item'); $(this).addClass('current-menu-item'); $('.wee').remove(); let $divW = $("<div class='wee'></div>"); $(this).append($divW); $thisnav = $('.wee').offset().left; }) }); });

这个是之前在看到某位大佬发布了一个悬浮的，本人是在此基础上进行了一些修改。但是忘记了原网站了，如果有人知道原网站可以告诉我。我会将原网站张贴到最底下。