<style type="text/css"> .pop { width:357px; height:194px; background:#0F0; position:absolute; display:none; } .pop .ct { margin:10px 10px 10px 60px; background:#F00; } </style> <div class="pop" id="popDV" onmouseout="hide(event)" onmouseover="clearTimeout(mouseOutTimer)"> <div class="ct"><a href="#">hello world</div> </div> <div id="dvCT"><a href="#">把鼠标放这里吧</a> </div> <script type="text/javascript"> function getAbsolutePosition(o){ //获取对象的绝对位置 var p={x:o.offsetLeft,y:o.offsetTop}; while(o=o.offsetParent){ p.x+=o.offsetLeft;p.y+=o.offsetTop; } return p; } function showPopUp(){// var p=getAbsolutePosition(this),popDV=document.getElementById('popDV'); popDV.style.left=p.x+this.offsetWidth+'px'; popDV.style.top=p.y+'px'; popDV.style.display='block'; } var mouseOutTimer=false; window.onload=function(){//加载完毕后给a标签添加事件 var as=document.getElementById('dvCT').getElementsByTagName('a'); for(var i=0;i<as.length;i++){ as[i].onmouseover=showPopUp; as[i].onmouseout=function(){mouseOutTimer=setTimeout(function(){hide(true);},100);} } } function hide(e){ var dv=document.getElementById('popDV'); if(e===true)dv.style.display='none';//计时器直接隐藏 else{//如果鼠标从弹出层移出时,需要判断是否是移动到弹出层里面的子控件上了,因为移动到子控件,如a标签等上时,也会触发onmuseout事件 var refObj=e.toElement||e.relatedTarget; if(!dv.contains(refObj))dv.style.display='none';//不是div的子控件则隐藏 } } if(typeof HTMLElement!='undefined')HTMLElement.prototype.contains=function(o){//扩展非IE浏览器下的contains方法 if(this==o)return true; while(o=o.parentNode)if(o==this)return true; return false; } </script>
相关推荐
jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示 jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示 jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示
Metro界面效果鼠标悬停显示文字是一款基于jQuery实现的Win8风格Metro界面效果鼠标悬停显示文字信息的网页代码。
jQuery css3鼠标悬停div容器显示光标动画特效 jQuery css3鼠标悬停div容器显示光标动画特效 jQuery css3鼠标悬停div容器显示光标动画特效
jQuery+Ajax实现鼠标悬停显示DIV,同时DIV跟进标签
JSP页面鼠标悬停打开div层,该用例是用jquery设置层的,table表列数据太长,一列显示太长会将样式撑乱,特将显示的数据做处理,可以后台字符串截取,也可以引入页面函数...,页面处理,本例子当鼠标悬停到具体列上时,...
鼠标悬停div边框动画 jquery鼠标悬停div边框动画 6个动画类型
当鼠标悬停在文本上面的时候,显示div,div是相对位置的。
鼠标悬停在按钮上弹出DIV层页面,可以点击页面上的链接什么的,鼠标离开后层消失,完美的jquery实例效果,当当网门户效果展示!
html单元格显示不下的文本用省略号代替,并且鼠标悬停在单元格下面用div显示该单元格的全部文本信息。
如果要实现,当鼠标移到div层上时,改变其背景色,我试了好多方法,只有这个方法可行,百度上其他的似乎有问题,暂且这样说吧。
这是一款基于vuejs的鼠标悬停动物显示和隐藏动画特效。该特效使用vuejs来编写,在鼠标悬停到卡片上面时,会有一只指定的小狗从卡片下冒出来,非常炫酷和可爱。
想达到鼠标悬停到元素a上,显示另一个元素b,可以通过css实现也可以通过js实现。 js: 写两个函数:mouseenter,mouseleave,例如:其中 $("#a").mouseenter(function() { $("#b").show("normal"); }); $("#a")....
原生鼠标悬停微信图标显示二维码效果
一款简单的div+css鼠标悬停图文列表详情展示代码,这里是用于电影列表展示,鼠标悬停显示更多电影的信息内容介绍。
我们在做导航标签的时候,有时会出现空间过于拥挤需要隐藏部分内容的情况,所以在这里我自己写了一个鼠标悬停显示扩展内容的效果,如下图所示。 总的来说效果还是比较好实现,但是比较头疼的是三角部分使用了伪...
鼠标悬停后,内容左右滑动,看起来比较舒服的效果 点击后弹出一个DIV层,里面是一个简单的banner焦点图切换效果
div css多方向鼠标悬停弹出代码是一款支持上下左右四个不同方向的移动鼠标改变样式弹出div层。
页面为,html,在页面顶端放置有两个文本不input 当鼠标悬停在上面时,会出现相应的提示,提示信息可以根据自己须要在html代码中更改....
div css鼠标悬停图片细节说明代码是一款创意的图片细节放大显示特效代码。