jquery 怎么实现鼠标在DIV上停止不动3秒后就出现悬浮提示框，如果移动鼠标的话就立刻关掉提示框
展开全部
先说不用js的方法
给div添加一个title属性即可(但是这样是没法操作到提示框的样式的 所以有js方法)
js方法 下面给出一份演示
<!DOCTYPE HTML>
<html>
<head>
<title>演示</title>
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
.TitleDiv{
width:300px;
background-color: #dddddd;
color: white;
padding: 15px 0;
}
.TitleDivText{
background-color: rgba(0,0,0,0.5);
color: white;
}
</style>
</head>
<body>
<div class="TitleDiv">
我是一个需要提示的div
</div>
<div class="TitleDiv">
我是一个需要提示的div
</div>
<div class="TitleDiv">
我是一个需要提示的div
</div>
<script type="text/javascript">
//四个参数
//Element表示需要提示的节点或者jq对象 可以是多个
//Text提示的文本
//Time 鼠标移入等待多少的时间才显示 单位毫秒
//Class 提示框的class属性可以修改样式
function MoveTitle(Element,Text,Time,Class){
var ElementJQ=$(Element);
//创建提示框
var CreateTitle=function(event){
if(ElementJQ.TitleTime){
clearTimeout(ElementJQ.TitleTime);
ElementJQ.TitleTime=setTimeout(function(){
ElementJQ.TitleDiv=document.createElement("div");
if(Class){
$(ElementJQ.TitleDiv).addClass(Class);
}
$(ElementJQ.TitleDiv).css({
position:"fixed",
left:event.clientX+16+"px",//16是鼠标的宽度
top:event.clientY+16+"px",//16是鼠标的高度
});
$(ElementJQ.TitleDiv).html(Text);
document.body.appendChild(ElementJQ.TitleDiv);
},Time)
}else{
ElementJQ.TitleTime=setTimeout(function(){
ElementJQ.TitleDiv=document.createElement("div");
if(Class){
$(ElementJQ.TitleDiv).addClass(Class);
}
$(ElementJQ.TitleDiv).css({
position:"fixed",
left:event.clientX+16+"px",//16是鼠标的宽度
top:event.clientY+16+"px",//16是鼠标的宽度
});
$(ElementJQ.TitleDiv).html(Text);
document.body.appendChild(ElementJQ.TitleDiv);
},Time)
}
}
ElementJQ.on("mousemove",function(e){
clearTimeout(ElementJQ.TitleTime);
ElementJQ.TitleTime=null;
if(ElementJQ.TitleDiv){
document.body.removeChild(ElementJQ.TitleDiv);
ElementJQ.TitleDiv=null;
}
CreateTitle(e);
});
ElementJQ.on("mouseover",function(e){
CreateTitle(e);
});
ElementJQ.on("mouseout",function(){
clearTimeout(ElementJQ.TitleTime);
ElementJQ.TitleTime=null;
if(ElementJQ.TitleDiv){
document.body.removeChild(ElementJQ.TitleDiv);
ElementJQ.TitleDiv=null;
}
});
}
var div=$(".TitleDiv")
MoveTitle(div,"我是提示的内容",3000,"TitleDivText");
</script>
</body>
</html>
追问
问一下，那个ElementJQ.TitleTime 的属性是怎么来的？ 你没声明过TitleTime 啊
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
