<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
</head>
<body>
<script src="http://www.hmcx.cn/js/jquery.min.js"></script>
<style>
.ttb {
margin: 0px;
padding: 0px;
position: relative;
}
.ttb li {
display: inline-block;
}
.img9 {
position: absolute;
width: 200px;
left: -0px;
top: -120px;
display: none;
z-index: 9999;
}
</style>
这是一个鼠标移上显示微信图片的实例,
当父窗口是overflo:hidden时,容易把显示的图片遮挡
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div style="border:1px solid red;position: relative;">
<ul class="ttb">
<img class="img9" src="http://img.php.cn/upload/course/000/000/003/5a44b1e60283e876.jpg" alt="" />
<li><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1565518228&site=qq&menu=yes"><img src="/img/1.jpg" /></a>
</li>
<li><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2291616358&site=qq&menu=yes"><img src="/img/1.jpg" /></a>
</li>
<li><a href=""><img class="hwx" src="/img/2.jpg" /></a></li>
<li><a href=""><img src="/img/3.jpg" /></a> </li>
<li><a href=""><img src="/img/4.jpg" /></a> </li>
<li><a href=""><img src="/img/5.jpg" /></a> </li>
<li><a href=""><img src="/img/6.jpg" /></a> </li>
<li><a href="/contact"><img src="/img/7.jpg" /></a> </li>
</ul>
</div>
<script>
$(function(){
$(".hwx").hover(function()
{
//这里写鼠标悬浮其上的动作
$(".img9").show();
},function(){
//这里写鼠标移动出去的动作
$(".img9").hide();
});
});
</script>
</body>
</html>