CSS-Box ausblenden/einblenden und dann den Implementierungscode der obersten Ebene

Bildbeschreibung hier einfügen

.imgbox{	
	Breite: 1200px;
	Höhe: 612px;
	Rand rechts: automatisch;
    Rand links: automatisch;
    Rand oben: 60px;   
}
.m1{
	Rand: durchgezogen;
	Rahmenbreite: 1px;		
	Höhe: 300px;
	Breite: 227px;
	

}
#m1img{
	Textausrichtung: zentriert;
	Polsterung oben: 55px;	    
}
#img2{
	Rand unten: 35px;
}
p>Spanne {
	Textdekoration: durchgestrichen;
}

#wo1{
	Position: absolut;
	links: 412px;
	oben: 60px;
}
#wo2{
	Position: absolut;
	links: 651px;
	oben: 60px;
}
#wo3{
	Position: absolut;
	links: 890px;
	oben: 60px;
}
#wo4{
	Position: absolut;
	links: 1129px;
	oben: 60px;
}
#wo5{
	Position: absolut;
	links: 412px;
	oben: 372px;
}
#wo6{
	Position: absolut;
	links: 651px;
	oben: 372px;
}
#wo7{
	Position: absolut;
	links: 890px;
	oben: 372px;
}
#wo8{
	Position: absolut;
	links: 1129px;
	oben: 372px;
}
 #sbox{
    Höhe: 76px;
	Breite: 227px;
	Hintergrundfarbe: #ff6700;
	Deckkraft: 0;/*unsichtbar*/
	z-Index:999;
	Position: absolut;
	unten: -0,5px;
}
#wo1:hover #sbox{
	Deckkraft: 1;	
}
#wo2:hover #sbox{
	Deckkraft: 1; (Anzeige)
}
#where3:hover #sbox{
	Deckkraft: 1;	
}
#wo4:hover #sbox{
	Deckkraft: 1;	
}
#where5:hover #sbox{
	Deckkraft: 1;	
}
#where6:hover #sbox{
	Deckkraft: 1;	
}
#where7:hover #sbox{
	Deckkraft: 1;	
}
#where8:hover #sbox{
	Deckkraft: 1;	
}
#sboxp{
	Zeilenhöhe: 76px;
	Farbe: weiß;
}

Bildbeschreibung hier einfügen

HTML Code

<!DOCTYPE html>
<html>
<Kopf>
	<Titel></Titel>
	<meta charset="utf-8">
	<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0" />
    <meta http-equiv="X-UA-kompatibel" content="ie=edge" />
	<link rel="stylesheet" type="text/css" href="css/1.css">
	<link rel="stylesheet" type="text/css" href="css/normalize.css">
</Kopf>
<Text>
	<div Klasse="imgbox">
	    <img src="images/mi.png">		
		<div Klasse="m1" id="wo1">
			<div id="m1img">
				<div id="img2"><img src="images/m1.png"></div>
                <p>Xiaomi TV 3</p>
                <p>999 Yuan<span>1199 Yuan</span></p>
                <div id="sbox"><p id="sboxp">Xiaomi TV-Werbung</p></div>
			</div>
		</div>
		<div Klasse="m1" id="wo2">
			<div id="m1img">
				<div id="img2"><img src="images/m2.png"></div>
                <p>Xiaomi TV 5</p>
                <p>1099 Yuan<span>1399 Yuan</span></p>
                <div id="sbox"><p id="sboxp">Xiaomi TV-Werbung</p></div>
			</div>
		</div>
		<div Klasse="m1" id="wo3">
			<div id="m1img">
				<div id="img2"><img src="images/m3.png"></div>
                <p>Xiaomi-Computer</p>
                <p>4999 Yuan<span>5199 Yuan</span></p>
                <div id="sbox"><p id="sboxp">Xiaomi-Computer-Aktion</p></div>
			</div>
		</div>
		<div Klasse="m1" id="wo4">
			<div id="m1img">
				<div id="img2"><img src="images/mi4.png"></div>
                <p>Xiaomi-Computer</p>
                <p>5.999 Yuan<span>6.199 Yuan</span></p>
                <div id="sbox"><p id="sboxp">Xiaomi-Computer-Aktion</p></div>
			</div>
		</div>
		<div Klasse="m1" id="where5">
			<div id="m1img">
				<div id="img2"><img src="images/m1.png"></div>
                <p>Xiaomi TV 3</p>
                <p>999 Yuan<span>1199 Yuan</span></p>
                <div id="sbox"><p id="sboxp">Xiaomi TV-Werbung</p></div>
			</div>
		</div>
		<div Klasse="m1" id="where6">
			<div id="m1img">
				<div id="img2"><img src="images/m2.png"></div>
                <p>Xiaomi TV 5</p>
                <p>1099 Yuan<span>1399 Yuan</span></p>
                <div id="sbox"><p id="sboxp">Xiaomi TV-Werbung</p></div>
			</div>
		</div>
		<div Klasse="m1" id="wo7">
			<div id="m1img">
				<div id="img2"><img src="images/m3.png"></div>
                <p>Xiaomi-Computer</p>
                <p>4999 Yuan<span>5199 Yuan</span></p>
                <div id="sbox"><p id="sboxp">Xiaomi-Computer-Aktion</p></div>
			</div>
		</div>
		<div Klasse="m1" id="wo8">
			<div id="m1img">
				<div id="img2"><img src="images/mi4.png"></div>
                <p>Xiaomi-Computer</p>
                <p>5.999 Yuan<span>6.199 Yuan</span></p>
                <div id="sbox"><p id="sboxp">Xiaomi-Computer-Aktion</p></div>
			</div>
		</div>				
	</div>
</body>
</html>

Zusammenfassen

Dies ist das Ende dieses Artikels über den Implementierungscode der obersten Ebene nach dem Ausblenden/Einblenden von CSS-Boxen. Weitere relevante Inhalte zum Ausblenden von CSS-Boxen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: So implementieren Sie die Kopierschutzfunktion für Webseiten (mit der Cracking-Methode)

>>: Detaillierte Erklärung der in JavaScript integrierten Objekte, Mathematik und Zeichenfolgen