导航栏横线跟着鼠标移动
话不多说直接上代码
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;
})
});
});
这个是之前在看到某位大佬发布了一个悬浮的,本人是在此基础上进行了一些修改。但是忘记了原网站了,如果有人知道原网站可以告诉我。我会将原网站张贴到最底下。