ホームページ > 記事 > ウェブフロントエンド > シンプルなホバー効果 (html)
シンプルなホバー効果 (html)
- 零下一度オリジナル
- 2017-04-28 15:30:282193ブラウズ
Win7、 Firefox 11打开 demo(小心撞墙 ) 更多的效果可以参考 php中文网。
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)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。