收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 2807|回复: 8

浮动层菜单的onmouseout问题

[复制链接]
发表于 2011-9-5 13:44:02 | 显示全部楼层 |阅读模式
我想实现的效果仅仅是点击K1显示K1里的K2,鼠标离开K2后K2消失。
现在的问题是鼠标指向K2中的div时就直接触发了 onmouseout事件,
尝试把K1写上指向显示K2 ,离开K1隐藏K2可以,但把onmouseout写到K2上,或者把onmouseover换成点击则不行
平时没有写过浮动层菜单,这么简单的效果居然完成不了。。。
求教,这个onmouseout应该怎么写,或者说怎么正确的判定?


 提示:您可以先修改部分代码再运行

发表于 2011-9-5 19:25:04 | 显示全部楼层
最简单的办法,用Jquery里的hover
回复 支持 反对

使用道具 举报

 楼主| 发表于 2011-9-6 09:15:06 | 显示全部楼层
没有用的,那跟直接写是一样的结果

我后来做出来的方法是给K2加透明的GIF背景图片
回复 支持 反对

使用道具 举报

发表于 2011-9-6 09:24:32 | 显示全部楼层

回复 3# c2j3y4 [楼主] 的帖子

不用那么复杂。你说的这个问题我以前碰到过。后来我是网上找了个模拟mouseenter的js代码解决的。后来jquery出来了,据说新版本的hover已经修复了这个问题,我没仔细测试,你换个版本看看。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2011-9-6 09:45:41 | 显示全部楼层
我外挂了jq 1.6   确实不行,JQ我下到本地测的,
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
  3. <HTML><HEAD>
  4. <script src="jquery-1.6.js"></script>
  5. <META http-equiv=Content-Type content="text/html; charset=gb2312">
  6. <STYLE type=text/css>
  7. #k1{
  8. height:20px;
  9. width:100px;
  10. overflow:hidden;
  11. border:1px solid #666;
  12. }
  13. #k2{
  14. position:absolute;
  15. display:none;
  16. padding-top:20px;
  17. }
  18. #k3,#k4,#k5,#k6{
  19. width:100px;
  20. height:20px;
  21. border:1px solid #000;
  22. }
  23. </STYLE>
  24. </HEAD>
  25. <BODY>
  26. <div id=k1 onclick="document.getElementById('k2').style.display='block'">
  27. <div id=k2 >
  28. <div id=k4></div>
  29. <div id=k5></div>
  30. <div id=k6></div>
  31. </div>
  32. </div>
  33. </BODY></HTML>
  34. <script >
  35. $("#k2").hover(    function () {      $(this).show();    },    function () {      $(this).hide();    }  );
  36. </script>
复制代码
回复 支持 反对

使用道具 举报

发表于 2011-9-6 10:12:14 | 显示全部楼层
那你用这个看看


  1. /// <summary>
  2. ///        为firefox模拟IE的onMouseEnter和onMouseLeave事件
  3. /// </summary>
  4. var onMouseEnter =
  5. {
  6.         evtHash: [],

  7.         ieGetUniqueID: function(_elem)
  8.         {
  9.                 if (_elem === window) { return 'theWindow'; }
  10.                 else if (_elem === document) { return 'theDocument'; }
  11.                 else { return _elem.uniqueID; }
  12.         },

  13.         addEvent: function(_elem, _evtName, _fn, _useCapture)
  14.         {
  15.                 if (typeof _elem.addEventListener != 'undefined')
  16.                 {
  17.                         if (_evtName == 'mouseenter')
  18.                                 { _elem.addEventListener('mouseover', onMouseEnter.mouseEnter(_fn), _useCapture); }
  19.                         else if (_evtName == 'mouseleave')
  20.                                 { _elem.addEventListener('mouseout', onMouseEnter.mouseEnter(_fn), _useCapture); }
  21.                         else
  22.                                 { _elem.addEventListener(_evtName, _fn, _useCapture); }
  23.                 }
  24.                 else if (typeof _elem.attachEvent != 'undefined')
  25.                 {
  26.                         var key = '{FNKEY::obj_' + onMouseEnter.ieGetUniqueID(_elem) + '::evt_' + _evtName + '::fn_' + _fn + '}';
  27.                         var f = onMouseEnter.evtHash[key];
  28.                         if (typeof f != 'undefined')
  29.                                 { return; }
  30.                        
  31.                         f = function()
  32.                         {
  33.                                 _fn.call(_elem);
  34.                         };
  35.                
  36.                         onMouseEnter.evtHash[key] = f;
  37.                         _elem.attachEvent('on' + _evtName, f);
  38.        
  39.                         // attach unload event to the window to clean up possibly IE memory leaks
  40.                         window.attachEvent('onunload', function()
  41.                         {
  42.                                 _elem.detachEvent('on' + _evtName, f);
  43.                         });
  44.                
  45.                         key = null;
  46.                         //f = null;   /* DON'T null this out, or we won't be able to detach it */
  47.                 }
  48.                 else
  49.                         { _elem['on' + _evtName] = _fn; }
  50.         },       

  51.         removeEvent: function(_elem, _evtName, _fn, _useCapture)
  52.         {
  53.                 if (typeof _elem.removeEventListener != 'undefined')
  54.                         { _elem.removeEventListener(_evtName, _fn, _useCapture); }
  55.                 else if (typeof _elem.detachEvent != 'undefined')
  56.                 {
  57.                         var key = '{FNKEY::obj_' + onMouseEnter.ieGetUniqueID(_elem) + '::evt' + _evtName + '::fn_' + _fn + '}';
  58.                         var f = onMouseEnter.evtHash[key];
  59.                         if (typeof f != 'undefined')
  60.                         {
  61.                                 _elem.detachEvent('on' + _evtName, f);
  62.                                 delete onMouseEnter.evtHash[key];
  63.                         }
  64.                
  65.                         key = null;
  66.                         //f = null;   /* DON'T null this out, or we won't be able to detach it */
  67.                 }
  68.         },
  69.        
  70.         mouseEnter: function(_pFn)
  71.         {
  72.                 return function(_evt)
  73.                 {
  74.                         var relTarget = _evt.relatedTarget;                               
  75.                         if (this == relTarget || onMouseEnter.isAChildOf(this, relTarget))
  76.                                 { return; }

  77.                         _pFn.call(this, _evt);
  78.                 }
  79.         },
  80.        
  81.         isAChildOf: function(_parent, _child)
  82.         {
  83.                 if (_parent == _child) { return false };
  84.                
  85.                 while (_child && _child != _parent)
  86.                         { _child = _child.parentNode; }
  87.                
  88.                 return _child == _parent;
  89.         }       
  90. };
复制代码
回复 支持 反对

使用道具 举报

发表于 2011-9-6 11:01:08 | 显示全部楼层

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

发表于 2011-9-6 14:26:15 | 显示全部楼层
捣鼓了一会 水平有限  没搞好 关键是里面杆件是里面包含了3个DIV

[[i] 本帖最后由 tangbao510 于 2011-9-6 14:53 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2011-9-6 17:33:45 | 显示全部楼层
我这有个比较偷懒的方法,表面上看是没问题了

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-3-31 17:42 , Processed in 0.109100 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表