jquery鼠标滑过显示DIV，鼠标移开隐藏DIV

最新推荐文章于 2022-11-06 08:07:12 发布

网微鸣

最新推荐文章于 2022-11-06 08:07:12 发布

阅读量7.5k

点赞数 1

分类专栏： jquery 文章标签： jquery html mouseover 鼠标滑过显示DIV 鼠标移开隐藏DIV

本文链接：https://blog.csdn.net/wangwm1986/article/details/44538153

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

用到了jquery，实现鼠标滑过显示DIV，鼠标移开隐藏DIV，可以同时支持多个层显示，代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="http://code.hs-cn.com/jquery/jquery-1.7.1.min.js"></script>
<title>随便玩玩</title>
</head>
<style type="text/css">
body
{
background-color:#999999;
}
 
#myDiv
{
background-color:#FFFFFF;
width:250px;
height:250px;
display:none;
}

#myDiv1
{
background-color:red;
width:250px;
height:250px;
display:none;
}
</style>
<body>


<div>
<a id="ah1" href="javascript:;" ><i class="i-cart"> </i> 层1（<strong>1</strong>）</a>
</div>


<div class="buy-conter" id="myDiv"  style=" display:none;">
随便写点什么11111111111111111111
</div> 
<br><br><br>
 
<a id="ah2" href="javascript:;" ><i class="i-cart"> </i> 层2（<strong>1</strong>）</a>
<div id="myDiv1" style="display:none">
随便写点什么2222222222222222222
</div>
 
</body>
 
<script type="text/javascript">
$(function ()
{
function test(divObj,aobj) {
var myDiv = $(divObj);

$(aobj).mouseover(function (event) 
{
$(divObj).fadeIn();;//调用显示DIV方法
$(document).one("mouseover", function () 
{//对document绑定一个影藏Div方法
$(divObj).hide();
});
 
event.stopPropagation();//阻止事件向上冒泡
});

$(divObj).mouseover(function (event) 
{
event.stopPropagation();//阻止事件向上冒泡
});
}

test("#myDiv", "#ah1");

test("#myDiv1", "#ah2");
});
</script>