win7、 firefox 11打开 demo(小心撞墙 ) 更多的效果可以参考 。
body {
background: #000;
overflow-y: scroll;
}
.items {
margin: 40px auto;
width: 1110px;
}
a {
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.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;
}
4. [代码][html]<body>
<a class="clear">请不要点我。</a>
<p class="items clear">
<p class="item item-1">
<p></p>
<img src="350x231/1.jpg" alt="" />
</p>
<p class="item item-2">
<p></p>
<img src="350x231/2.jpg" alt="" />
</p>
<p class="item item-3">
<p></p>
<img src="350x231/3.jpg" alt="" />
</p>
<p class="item item-4">
<p></p>
<img src="350x231/4.jpg" alt="" />
</p>
<p class="item item-5">
<p></p>
<img src="350x231/5.jpg" alt="" />
</p>
<p class="item item-6">
<p></p>
<p></p>
<p></p>
<p></p>
<img src="350x231/6.jpg" alt="" />
</p>
</p>
<p id="preloader"></p>
</body>
以上就是一个简单的悬停效果（html）的详细内容。