鼠标在导航栏移入移出的隐藏显示效果jquery

 

<li class="account"><a href="#" class="account1">我的账号</a>|
<div class="my-account">
这里是一些开始被隐藏鼠标经过就出现的文字
               </div>

</li>

首先注意设置定位方式

父类.account{position:relative;}

子类.my-account{position:absolute;
right:-33px;top:35px;}

这样子类才能随着父类变化位置，两者位置也就固定了。

 

注意过程是鼠标经过我的账号，里面的文字显示，鼠标移出我的账号文字隐藏，

但是如果鼠标经过里面的文字的时候，文字也是显示的，而此时鼠标是移出了我的账号的，所以文字又是隐藏的。两者就矛盾了，所以鼠标经过文字就关闭刚才的移出我的账号隐藏的事件，这是就需要在原来上面加个定时器啦。

 

特别注意的一点是，鼠标经过的是我的账号这几个字，所以应该是account1来触发事件，不是整个li的account。。

 

var time=null;

$(".my-account").hide();
$(".account1").mouseover(function(){clearTimeout(time); $(".my-account").show(); });
$(".account1").mouseout(function(){time=setTimeout(function(){$(".my-account").hide()},500);});
$(".my-account").mouseover(function(){clearTimeout(time);$(".my-account").show();});
$(".my-account").mouseout(function(){time=setTimeout(function(){$(".my-account").hide()},500);});//500ms之后再消失