jquery事件相关问题

冰封神起 发布于 2014/10/24 16:43
阅读 128
收藏 0

<div id="A">

<div id="a1"></div><div id="a2"></div>

</div>

<div id="B">

</div>

效果图如下:

我其实是想实现:如果鼠标移动到【moveover】 a1 上面的时候,B区域(本来是hide的)会显示出来,然后鼠标从a1移到B的时候,B不能消失,直到鼠标离开a1和B整体区域之外就消失,类似于菜单栏

我目前遇到难题就是,鼠标离开a1区域,就会调用mouseleave方法,B马上就消失,实现是用

$("#a1").mouseleave(function(e){

    $("#B").hide();

}

有没有一种办法就是鼠标离开a1,但是停留在B上面。B区域不要隐藏

目前想法是:

$("#a1").mouseleave(function(e){

//判断鼠标时候停留在B上面,是就不隐藏B了   

 $("#B").hide();

}

请问各位大神有没有更好办法,这个实现起来有点累

加载中
0
静心天涯
静心天涯

个人想法,不知道是否可以,你可以放过来做,就是当不鼠标不在 a1 和 B 上时(在出 a1 和 B 的其他的其他地方添加 mouseover),再触动隐藏功能。

静心天涯
静心天涯
回复 @冰封神起 : 那你在你的方法里,添加一些 if 判断吧,不知道是否可以,当鼠标在 a1 或 B 区域时,直接return,不执行隐藏方法
冰封神起
冰封神起
谢谢,但是这种方法不适合我这个网页,其他的地方标签太多了
0
冷三叔
冷三叔

做个计时器,然后再判断鼠标是否在 B 上,如果在,则一直显示..


冰封神起
冰封神起
好像有这样实现,做一点延迟,然后再判断事件
0
誰念西風獨自涼
誰念西風獨自涼
貌似可以获得鼠标离开的page坐标,如果下方离开,就return false;
冰封神起
冰封神起
这个实现是可以,我有试过,就是感觉有没有其他更好的办法
0
埚牛
埚牛

把鼠标悬停事件也应用到B上面,应该可以了。

$("#a1, #B").mouseover(function(e){

    $("#B").show();

}

埚牛
埚牛
@冰封神起 把a1的hide()加上一个时间参数就好了
冰封神起
冰封神起
但是我有设置离开a1后触发hide事件,虽然B有加,但是离开a1马上隐藏了
0
JinxQ
JinxQ
  1. <div><div id="A1" ></div><div id="A2" ></div></div>
  2. <div id="C"> <div id="B" style="display:none"></div> </div>
  3. <script>
  4. $("#C","#A1").mouseove(function()
  5. {
  6.     $("#B").show();
  7. })
  8. $("#A1","#B").mouseleave(function()
  9. {
  10.     $("#B").hide();
  11. })
  12. </script>

    

JinxQ
JinxQ
回复 @冰封神起 : 没测试,我测试下
冰封神起
冰封神起
好像这个不行吧?
返回顶部
顶部