提示框

发现CSS也能干这事

   <style type="text/css">
			.box{
				position: relative;
				margin:200px 0 0 200px;
				display: inline-block;
			}
			.popup{
				width: 200px;
				height: 100px;
				border: 1px #ededed solid;
				box-shadow: 0 6px 12px rgba(0,0,0,.175);
				display: none;
				left:40px;
				top:0;
				background: rgba(0,0,127,0.6);
				position: absolute;
				color: #fff;
				padding: 10px
			}

			.box:hover .popup{
				display: block;

			}
        </style>
    </head>
    <body>
    <div>
		<a class="box" href="#">
			<i>hover</i>
			<div class="popup">我是提示框我是提示框我是提示框</div>
		</a>
    </div>

还是我认为的，CSS结构写的好，就可以少写几行JS，看来CSS写的好，就可以不写JS，我估计还有很多窍门，我得把我的HTML5权威指南看一下了

评论