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

效果图

关键事件

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"); //为导航栏增加淡出特效
	});


});

 

特殊效果

导航栏的出现和消失的淡入淡出效果（如gif所示），请使用wow.js和animated.css，用法可见https://570109268.iteye.com/blog/2411836。

使用特殊效果的注意事项

请将导航栏的class中添加默认进入的特效，在移出导航栏位置时，为该class添加移出特效，但是下次进入时也必须移除移出特效，否则会出现两个特效冲突，导致导航栏不可见（详见上文代码）