JQ实现鼠标移至导航栏时，导航栏出现，移出时导航栏消失

最新推荐文章于 2024-04-20 23:48:04 发布

Sh@dow

最新推荐文章于 2024-04-20 23:48:04 发布

阅读量2.1k

点赞数 1

文章标签： css jquery js 导航栏

本文链接：https://blog.csdn.net/weixin_43780699/article/details/89810361

版权

效果图

关键事件

mouseover、mouseleave

实现方式

实现这个效果首先要使用了一个层叠的方法，就是在导航栏的位置放置一个与导航栏长宽一致的div（以下称为cover），position设置为absolute，导航栏的position设置为relative，从而实现在同一位置的重叠，然后再开始写事件。

$(function() {

	$(".cover").mouseover(function() { //鼠标移至cover时

		$(".cover").css({
			"display": "none", //cover层不可见
			"position": "relative", //位置设置为相对

		});



		$(".nav").css({
			"position": "absolute", //导航栏位置设置为固定
			"z-index": "999", //设置离用户的距离，越大越近，也就是能覆盖在比值小的元素上
			"display": "inline-flex", //设置为可见（属性值根据自己的设计，例如：block、inline-block等）
		});

		$(".nav").removeClass("fadeOutRight"); //（移除淡出特效）


	});
	//注意:mouseout将导致事件无限被触发，不可使用

	$(".nav").mouseover(function() { //当鼠标放置在导航栏上的时候
		$(".nav").css({
			"position": "absolute",
			"z-index": "999",
			"display": "inline-flex",
		});
		$(".nav").removeClass("fadeOutRight");
	});

	$(".nav").mouseleave(function() { //当鼠标离开导航栏时
		$(".cover").css({
			"display": "inline-block", //让cover重新覆盖
			"position": "absolute",
			"z-index": "999"
		});

		$(".nav").css({
			"position": "relative"
		});
		$(".nav").addClass("fadeOutRight"); //为导航栏增加淡出特效
	});


});