Jquery创建一个层当鼠标移动到层上面不消失效果
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Jquery创建一个层当鼠标移动到层上面不消失效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2184字，纯文字阅读大概需要4分钟。
内容图文
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#Adiv div {float:left; width:100px;border:1px solid #333;margin-top:100px;}
#SDiv {width:135px;position: absolute;}
</style>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
var x = -90;
var y = -70;
$("#Adiv div").mouseenter(function(e){
this.xx = ($(this).index() + 1) * 100;
this.yy = $(this).offset().top;
var login = $(this).attr("href");
if($("#SDiv")){$("#SDiv").remove();}
var div = "<div id='SDiv' style='border:1px solid #333'><img src='images/login_box/box_onmouse.png' border='0' usemap='#Map' /><map name='Map' id='Map'><area shape='rect' id='divLogin' coords='16,14,67,35' href="+login+" /><area shape='rect' id='divRegister' coords='75,15,127,37' href='http://www.baidu.com' /></map></div>";
$("body").append(div);
$("#SDiv").css({ "top": (this.yy + y) + "px", "left": (this.xx + x) + "px" });
}).mouseleave(function (e) {
var ex = e.pageX;
var ey = e.pageY;
var sx = $("#SDiv").offset().top;
var sxx = $("#SDiv").offset().top + 72;
var sy = $("#SDiv").offset().left;
var syy = $("#SDiv").offset().left + 135;
if(ey > sx && ey <= sxx && ex > sy && ex <= syy){
$("#SDiv").mouseleave(function(){$("#SDiv").remove();});
return false;
}
$("#SDiv").remove();
});
})
</script>
</head>
<body>
<!--
<div class="box_onmouse"><img src="images/login_box/box_onmouse.png" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" id="divLogin" coords="16,14,67,35" href="#" />
<area shape="rect" id="divRegister" coords="75,15,127,37" href="#" />
</map>
</div>
-->
<div id="Adiv">
<div href="11111">1111111</div>
<div href="22222">2222222</div>
<div href="33333">3333333</div>
</div>
<div>项目中有这样的需求：鼠标移动到某个div上面时动态创建一个层，这个层中有2个按钮图片（美工切换了），每个图片链接不同地址（链接地址有前面的div提供），鼠标移除这个层则移除创建的div，如果鼠标移动到这个创建的div上面则不移除</div>
</body>
</html>
内容总结
以上是互联网集市为您收集整理的Jquery创建一个层当鼠标移动到层上面不消失效果全部内容，希望文章能够帮你解决Jquery创建一个层当鼠标移动到层上面不消失效果所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】