<!doctype html> <head> <meta http-equiv="content-type" content="text/html; charset=GBK"> <title> </title> </head> <body> <style> *{padding:0;margin:0;border:none;} ul,li{list-style-type:none;} .aside{font-size:12px;width:228px;margin:20px;position:relative;border:1px solid #AACCEE;background-color:#F3FAFF;padding-top:10px;padding-bottom:10px;} .aside .con-popup{position:absolute;left:235px;top: 0;border:1px solid #AACCEE;width:500px;z-index:1} .aside dd{height:25px;line-height:25px;width:228px;} .aside dd .con{border-top:1px solid #F3FAFF;border-bottom:1px solid #F3FAFF;} .aside dd .con-popup{display:none;height:200px;} .aside dd.hover .con{background-color:#fff;border-top:1px solid #AACCEE;border-bottom:1px solid #AACCEE;width:236px;position:absolute;z-index:9} .aside dd.hover .con-popup{display:block;} </style> <div id="aside" class="aside"> <dl> <dt>生活服务</dt> <dd> <div class="con"> <a href="###">彩票</a> <a href="###">基金</a> <a href="###">股票</a> <a href="###">团购</a> </div> <div class="con-popup"> <ul> <li> <a href="###">彩票</a> <a href="###">基金</a> <a href="###">股票</a> <a href="###">团购</a> </li> <li> <a href="###">彩票</a> <a href="###">基金</a> <a href="###">股票</a> <a href="###">团购</a> </li> <li> <a href="###">彩票</a> <a href="###">基金</a> <a href="###">股票</a> <a href="###">团购</a> </li> <li> <a href="###">彩票</a> <a href="###">基金</a> <a href="###">股票</a> <a href="###">团购</a> </li> <li> <a href="###">彩票</a> <a href="###">基金</a> <a href="###">股票</a> <a href="###">团购</a> </li> <li> <a href="###">彩票</a> <a href="###">基金</a> <a href="###">股票</a> <a href="###">团购</a> </li> </ul> </div> </dd> <dd> <div class="con"> <a href="###">天气</a> <a href="###">地图</a> <a href="###">银行</a> <a href="###">购物</a> </div> <div class="con-popup"> <ul> <li> <a href="###">天气</a> <a href="###">地图</a> <a href="###">银行</a> <a href="###">购物</a> </li> <li> <a href="###">天气</a> <a href="###">地图</a> <a href="###">银行</a> <a href="###">购物</a> </li> <li> <a href="###">天气</a> <a href="###">地图</a> <a href="###">银行</a> <a href="###">购物</a> </li> </ul> </div> </dd> <dd> <div class="con"> <a href="###">汽车</a> <a href="###">二手车</a> <a href="###">大学</a> <a href="###">房产</a> </div> <div class="con-popup"> <ul> <li> <a href="###">汽车</a> <a href="###">二手车</a> <a href="###">大学</a> <a href="###">房产</a> </li> <li> <a href="###">汽车</a> <a href="###">二手车</a> <a href="###">大学</a> <a href="###">房产</a> </li> <li> <a href="###">彩票</a> <a href="###">基金</a> <a href="###">股票</a> <a href="###">团购</a> </li> </ul> </div> </dd> </dl> </div> <script> /* * class Popup hover菜单效果 * @param {ELEMENT} 可传入元素、ID * @return {Popup INSTANCE} * @author: zzf */ function Popup() { if (!this instanceof arguments.callee) { return new arguments.callee(); } this.init.apply(this, arguments); } Popup.prototype=function (){ var E = function() { function elContains(a, b) { try { return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(b) & 16); } catch(e) {} } function addEvt(el, type, fn) { function fun(e) { var a = e.currentTarget,b = e.relatedTarget; if (!elContains(a, b) && a != b) { fn.call(e.currentTarget, e); } } if (el.addEventListener) { if (type == 'mouseenter') { el.addEventListener('mouseover', fun, false); } else if (type == 'mouseleave') { el.addEventListener('mouseout', fun, false); } else { el.addEventListener(type, fn, false); } } else { el.attachEvent('on' + type, function (){ fn.call(el); }); } } return { addEvt: addEvt }; } (); return { constructor: Popup, init:function (wrap,tag,cn,timeout){ var wrap=document.getElementById(wrap), tag=wrap.getElementsByTagName(tag), len=tag.length, i=0, timeout=timeout || 500, timer=null; for(; i<len; i++) { E.addEvt(tag[i], 'mouseenter',function() { var self=this; timer && clearTimeout(timer); timer=setTimeout(function (){ self.className=cn; },timeout) }); E.addEvt(tag[i], 'mouseleave',function() { this.className=''; }); } } } }(); //调用 new Popup('aside','dd','hover'); </script> </body> </html>
运行代码
