首页 > 代码库 > HTML： 简单的悬停效果
HTML： 简单的悬停效果
1. [图片] 捕获.jpg
?2. [代码][CSS]代码
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 ~ div.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 ~ div.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 > div {
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 > div {
height: 0%
}
.item-2:HOVER > div {
height: 0%;
top: 50%;
}
.item-3:HOVER > div {
height: 0%;
left: 50%;
top: 50%;
width: 0%;
}
.item-4:HOVER > div {
height: 0%;
left: 50%;
top: 50%;
width: 0%;
-moz-transform: rotate(360deg);
}
.item-5:HOVER > div {
height: 0%;
left: 50%;
top: 50%;
width: 0%;
-moz-transform: rotate(-360deg);
}
.item-6 > div {
height: 50%;
width: 50%;
}
.item-6 > div:NTH-CHILD(2) {
left: 50%;
top: 0;
}
.item-6 > div:NTH-CHILD(3) {
left: 0;
top: 50%;
}
.item-6 > div:NTH-CHILD(4) {
left: 50%;
top: 50%;
}
.item-6:HOVER > div {
height: 0;
width: 0;
/*-moz-transform: rotate(-360deg);*/
}
.item-6:HOVER > div:NTH-CHILD(2) {
left: 100%;
/*-moz-transform: rotate(360deg);*/
}
.item-6:HOVER > div:NTH-CHILD(3) {
top: 100%;
}
.item-6:HOVER > div: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;http://www.bizhizu.cn/shouhui/?
width: 0;
}
3. [代码][HTML]代码
<body>手绘图片
<a class="clear">请不要点我。</a>
<div class="items clear">
<div class="item item-1">
<div></div>
<img src="http://www.mamicode.com/350x231/1.jpg" />
</div>
<div class="item item-2">
<div></div>
<img src="http://www.mamicode.com/350x231/2.jpg" />
</div>
<div class="item item-3">
<div></div>
<img src="http://www.mamicode.com/350x231/3.jpg" />
</div>
<div class="item item-4">
<div></div>
<img src="http://www.mamicode.com/350x231/4.jpg" />
</div>
<div class="item item-5">
<div></div>
<img src="http://www.mamicode.com/350x231/5.jpg" />
</div>
<div class="item item-6">
<div></div>
<div></div>
<div></div>
<div></div>
<img src="http://www.mamicode.com/350x231/6.jpg" />
</div>
</div>
<div id="preloader"></div>
</body>
HTML： 简单的悬停效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。