当前位置: 代码迷 >> JavaScript >> div+mouseenter+mouseout模拟title怎么添加延时?
  详细解决方案

div+mouseenter+mouseout模拟title怎么添加延时?

热度:328   发布时间:2013-07-09 09:50:48.0
div+mouseenter+mouseout模拟title如何添加延时???
为了防止鼠标快速划过使模拟title的div显示出来,需要对mouseenter增加适当的延时,类似于悬停之上0.5秒后才开始显示title的效果,请教大家如何实现??

<div  id="test">offset</div>
<div id="title">
Hello World.
</div>


$(function() {
$("#test").bind({"mouseenter": function() {  
    $("#title").stop(true).delay(100).show();
},
"mouseout": function() {    
    $("#title").hide();
}});
});


#title {
    width:100px;
    height:100px;
    display:none;
    position:absolute;
    background-color:red;
}


#test {
     position:absolute;
    text-align:center;
    left:20%;
     top:20%;
    right:50%;
    bottom:50%;
    background-color:gray;
    border: 1px solid ;
}

------解决方案--------------------
引用:
一开始title是这样子的
<div id="title">
Hello World.
</div>
通过跟踪代码可以发现,当快速划动几次后,html代码变成如下的样子:

<div id="title" style="display: none; height: 1px; margin: 0px; padding: 0px; width: 1px; overflow: hidden; opacity: 0;">
Hello World.
</div>


是什么原因呢??透明了,长度宽度变成了1,还增加了不少其它属性,为什么,求解答??

这个我也不是很清楚原因,可能是动画没有清除干净吧,
不过把stop(true, true)这样子貌似好点
  相关解决方案