移上去显示-离开隐藏
：JQUERY ：站长发布 ：3年前(2022-01-11) ：1249次浏览
<!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=utf-8" />
<link rel="stylesheet" type="text/css" href="show_div.css" />
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<style type="text/css">
.show_div{ display: block;margin: 0 auto;width: 500px;height: 250px;border: 1px solid #ccc;display: none;clear: both;position:absolute;background:#fff;margin-left:-250px;left:50%;}
.show_img {width: 200px;margin-left: 25px;float: left;}
.show_img span{ display:block;text-align:center;}
</style>
<script type="text/javascript">
$(document).ready(function (){
$('#show').hover(
function () {
$('#box').show();
},
function () {
$('#box').hide();
}
);
$('#box').hover(
function () {
$(this).show();
},
function () {
$(this).hide();
}
);
});
</script>
</head>
<body>
<div style="margin: 0 auto; width: 160px; height: auto;position:relative ">
<p>扫一下,优惠多多！</p>
<img src="bground.png" id="show" href="javascript:void(0);" alt="img">
<div id="box" class="show_div">
<div class="show_img">
<img src="bground.png" alt="xxxx手机版">
<span>xxxx手机版</span>
</div>
<div class="show_img">
<img src="bground.png" alt="xxxxx城">
<span>xxxx城</span>
</div>
</div>
</div>
<div style="margin: 0 auto; width: 160px; height: 20px;">aaaaaaaaaaaaaaaaa</div>
</body></html>
版权声明：本文为云海网站长的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://xn--qiv211ar60a.com/19.html
