用css实现弹出层

来源:赵克立博客分类: 前端开发标签：--发布时间:2014-04-29 06:04:39最后更新:2014-04-29 06:04:39浏览:2329

本文为博主原创文章，转载请声明原文链接...谢谢。o_0。

原文链接:

http://www.zhaokeli.com /article/1491.html

更新时间：

2014-04-29 06:04:39

温馨提示：

学无止境,技术类文章有它的时效性,请留意文章更新时间,如发现内容有误请留言指出,防止别人"踩坑",我会及时更新文章

<!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" />

<title>用css实现弹出层</title>

</head>

<style>

.box{ width:200px; height:100px; background:#999;}

.box .link{ display:table;width:200px; height:100px;}

.box .link .popup{position:absolute; left:50%; margin-left:-150px; margin-top:-100px; top:50%;  display:none; width:300px; height:200px; background:#F00;}

.box .link:hover{ position:relative; /*没有这个在IE中不可用*/}

.box .link:hover .popup{display:block;}

</style>

<body>

<div class="box"><a  class="link" href="http://baidu.com" target="_blank"><img src="test.jpg" width="200" height="100"  /><span class="popup"></span></a></div>

</body>

</html>