关闭

纯CSS弹出层的示例代码

6734人阅读 评论(0) 收藏 举报
分类:
<html>
<head>
	<style>
		.bluequestionmark
		{
    		background-repeat:no-repeat;
    		display:inline-block;
    		background-size:16px 16px;
    		width:16px;
    		height:16px;
    		position:relative;/*the out div must be position:relative*/
		}

		a.tipinfo
		{
    		display:none;
		}

		div.bluequestionmark:hover a.tipinfo
		{
    		white-space:nowrap;/*the pop up infomation will show in one line*/
    		display:block;
    		border:1px solid #0094ff;
   			position:absolute;
    		top:18px;
    		left:0px;
    		padding:6px 10px;
    		background-color:white;
		}

		a.tipinfo:hover a.tipinfo
		{
    		white-space:nowrap;
    		display:block;
    		border:1px solid #0094ff;
   			position:absolute;
    		top:18px;
    		left:0px;
    		padding:6px 10px;
    		background-color:white;
    		cursor: text;
		}
	</style>
</head>
<body>
	move your mouse to pic
	<div class="bluequestionmark" style="background-image:url('http://img.blog.csdn.net/20131206112028640')">
        <a class="tipinfo">a lot of pop up information</a>
    </div>
</body>
</html>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:628504次
    • 积分:8143
    • 等级:
    • 排名:第2462名
    • 原创:211篇
    • 转载:41篇
    • 译文:1篇
    • 评论:72条
    文章分类