Win7、 Firefox 11打開(kāi) 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 >
以上就是一個(gè)簡(jiǎn)單的懸停效果（html）的詳細(xì)內(nèi)容，html教程        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。