一个简单的悬停效果（html）

Win7、 Firefox 11打开 demo(小心撞墙 ) 更多的效果可以参考 php 。

body { background: #000; overflow-y: scroll; .items { margin: 40px auto; width: 1110px; color: #FFF; cursor: pointer; margin: 0 0 20px 620px; text-align: center; text-decoration: none; a:HOVER { color: red; a:HOVER ~ p.items { border: 1px solid #FFF; background: url( http://farm5.html' target='_blank'>staticflickr.com/4059/4710746077_03125f9331.jpg ) no-repeat scroll center center transparent; height: 500px; a:HOVER ~ p.items *{ display: none; .item { border: 10px solid #FFF; cursor: pointer; float: left; height: 231px; width: 350px; -moz-transform: scale(0.8); -moz-transition: all 0.5s ease-in-out 0s; .item p { background: rgba(0,0,0,0.7); height: 100%; left: 0; position: absolute; top: 0; width: 100%; -moz-transition: all 0.5s ease-in-out 0s; .item:HOVER { -moz-transform: scale(1); .item-1:HOVER p { height: 0% .item-2:HOVER p { height: 0%; top: 50%; .item-3:HOVER p { height: 0%; left: 50%; top: 50%; width: 0%; .item-4:HOVER p { height: 0%; left: 50%; top: 50%; width: 0%; -moz-transform: rotate(360deg); .item-5:HOVER p { height: 0%; left: 50%; top: 50%; width: 0%; -moz-transform: rotate(-360deg); .item-6 p { height: 50%; width: 50%; .item-6 p:NTH-CHILD(2) { left: 50%; top: 0; .item-6 p:NTH-CHILD(3) { left: 0; top: 50%; .item-6 p:NTH-CHILD(4) { left: 50%; top: 50%; .item-6:HOVER p { height: 0; width: 0; /*-moz-transform: rotate(-360deg);*/ .item-6:HOVER p:NTH-CHILD(2) { left: 100%; /*-moz-transform: rotate(360deg);*/ .item-6:HOVER p:NTH-CHILD(3) { top: 100%; .item-6:HOVER p:NTH-CHILD(4) { left: 100%; top: 100%; /*-moz-transform: rotate(360deg);*/ .clear:AFTER { clear: both; content: /0020  display: block; height: 0; overflow: hidden; visibility: hidden; width: 0; #preloader { background-image: url( http://farm5.staticflickr.com/4059/4710746077_03125f9331.jpg  height: 0; width: 0; }

 body  a >
以上就是一个简单的悬停效果（html）的详细内容，html教程        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。