Heim > Artikel > Web-Frontend > Ein einfacher Hover-Effekt (HTML)
Ein einfacher Hover-Effekt (HTML)
- 零下一度Original
- 2017-04-28 15:30:282154Durchsuche
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>Das obige ist der detaillierte Inhalt vonEin einfacher Hover-Effekt (HTML). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie erhalte ich HTML basierend auf der angegebenen Zwischenablage?Nächster Artikel：Wie erhalte ich HTML basierend auf der angegebenen Zwischenablage?