摘要：
　　鼠标移入元素时显示隐藏的内容，这是网页中常见的特效。如果触发者和弹出者是父子嵌套关系比较好解决，如果是非嵌套关系，解决起来就比较麻烦了。因为要判断鼠标在不在区域内，网上多数文章都介绍使用e.target来检测节点，这个方法太low......

半个月没写新文章了，今天来一篇吧。

今天我们来说说网页中常见的一种特效：鼠标滑过弹出隐藏内容(非父子关系)。说的再直白一点就是：当鼠标滑过二维码文字的时候，弹出一个二维码的图片；鼠标离开文字的时候，隐藏二维码图片。动态gif演示图一张：

看起来很简单是吧，那艺灵就带着看官一起来详细的分析下这个交互过程吧。网上95%的文章都是用下面这种方法实现的，其实我们还可以换一种更简单的方法！

一、场景复原

假设我们现在有两个盒子，分别为：A、B，这两个盒子在结构上面不是嵌套的结构，即：非父子级关系。那么肯定会有新手问什么是父子级关系了，如果不了解，嵌套应该能理解吧。再不能理解我们来看举一个例子：

1.1、嵌套结构

<ul class="nav">
　<li>
　　<a>艺灵设计</a>
　</li>
</ul>

上面示例的这串代码经常见到，常用来设置网站的导航栏。在这串代码中，li标签里面包含有一个a标签，此时li和a就构成了嵌套结构，li成为a的父亲。上面的代码用EMMET表示为：ul.nav>li>a。

至于什么是EMMET，看官自行百度、谷歌吧。如果看官电脑中安装有Dreamweaver，可以装个EMMET，写代码非常好用哦！相关教程→ 给DreamweaverCs6安装Emmet插件经验

下面我们接着上面的讲。

1.2、交互效果分析

初始默认状态：A盒子通常是可见的，B盒子是隐藏的。
滑过离开状态：1、鼠标移入A盒子时，B盒子显示；
2、鼠标移开A盒子时，B盒子隐藏；
3、鼠标移开A盒子快速后移入B盒子，移开B盒子时，B盒子隐藏；
4、鼠标移入B盒子后再移入A盒子，再移入非A、B盒子时隐藏B盒子。

对于上面提到的两种状态，前面的没什么技术含量，主要是后面的3和4，判断起来有些麻烦。毕竟现在A和B不是嵌套关系，一个简单的hover完全无用武之地！那怎么办呢？

1.3、e.target判断

如果看官在网上搜索下这类的效果，95%的copy文章中都提供了相同的方法，即：利用e.target来判断当前的节点在不在A和B的范围内，然后再根据这个范围再来执行剩下操作。如果看官使用过e.target就会发现，这种方法非常蠢！因为打印的内容太多了......

既然如此，那有没有更好的办法呢？

艺灵想到了一种方法，不需要用e.target打出的信息来进行判断，而是直接利用开关变量来解决。

二、利用开关变量优化源码

在上面的交互分析中，我们可以看出，A和B都有两种状态，分别是：鼠标移入和鼠标移开，此时我们定义两个开关变量，分别命名为：i和j，设置初始值均为0。当鼠标移入A时，改变i的值，即：i=1；当鼠标移开A的时候，继续改变i的值，即：i=0。对于B，也是同理。最后我们只需要判断i和j的值就可以判断鼠标是否在有效范围内了。

不知道看官们有没有读懂，如果没有读懂，请看下面的示例源码解析。

三、示例源码剖析

3.1、html源码

<div id="m-hd">鼠标移入我时显示下拉内容</div>
<div id="m-bd">我就是下拉内容的框架，这里可以放自定义内容。当鼠标移开我后并且没有移入到m-hd上时，我会进行隐藏。</div>

简单的写下css吧。

3.2、css源码

<style type="text/css">
　*{margin:0;padding:0;}
　#m-hd{width:300px;line-height:2em;border:1px solid #ccc;margin:20px auto 0;text-align:center;cursor:pointer;border-radius:5px 5px 0 0}
　#m-bd{position:absolute;left:50%;top:53px;margin-left:-236px;width:450px;line-height:2em;border:1px solid #ccc;padding:0 10px;display:none;border-radius:5px}
　/*激活状态*/
　#m-hd.z-act{position:relative;z-index:5;border-bottom:1px solid #fff}
</style>

此时大致的静态模型就做好了，来张对比图吧：

接下来就是js了，来吧！

3.3、jquery源码

<!--如果页面中已引入了jquery库，可忽略下面的库，建议库版本为1.8.3+-->
<script type="text/javascript" src="http://www.yilingsj.com/skin/yilingsj/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
　/*看官在复制js代码时，需要应避免示例中的命名与您自身的命名相同，要不然会污染变量哦......*/
　var i=j=0,
　　mhd=$('#m-hd'),
　　mbd=$('#m-bd'),
　　act='z-act';
　/* m-hd 操作*/
　mhd.on({
　　"mouseover":function(){
　　　/*鼠标移入时*/
　　　/*改变i的值*/
　　　i=1;
　　　/*m-bd显示*/
　　　mbd.show();
　　　/*激活自身*/
　　　$(this).addClass(act);
　　},"mouseleave":function(){
　　　/*鼠标移开时*/
　　　/*改变i的值*/
　　　i=0;
　　　/*延迟150毫秒后判断*/
　　　setTimeout(function(){
　　　　if(j!=1){
　　　　　/*表示移开后并没有移入到m-bd身上，所以可以隐藏m-bd了*/
　　　　　mbd.hide();
　　　　　mhd.removeClass(act);
　　　　}
　　　},150);
　　}
　});
　/* m-bd 操作*/
　mbd.on({
　　"mouseover":function(){
　　　/*鼠标移入时*/
　　　/*改变j的值*/
　　　j=1;
　　},"mouseleave":function(){
　　　/*鼠标移开时*/
　　　/*改变i的值*/
　　　j=0;
　　　/*延迟150毫秒后判断*/
　　　setTimeout(function(){
　　　　if(i!=1){
　　　　　/*表示移开后并没有移入到m-bd身上，所以可以隐藏m-bd了*/
　　　　　mbd.hide();
　　　　　mhd.removeClass(act);
　　　　}
　　　},150);
　　}
　});
</script>

由于源码中含有大量的注释，所以看起来比较多，如果看官不需要注释，全部删除/**/这样的代码即可。为了更好的检验下这个效果，请猛戳下方的demo。

3.4、资源下载

[js源码]鼠标移入时弹出隐藏内容网页特效之鼠标移入时弹出隐藏内容demo演示.zip 　积分：0
demo演示

四、插件

至于插件，就下次有空再写吧。今天主要是讲下原理。如果看官能理解，插件也没问题。

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/jquery/2016-09-15/436.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。