Rumah > Artikel > hujung hadapan web > Bagaimana untuk mencapai kesan paparan dan biarkan-sembunyi apabila tetikus melalui css

Bagaimana untuk mencapai kesan paparan dan biarkan-sembunyi apabila tetikus melalui css

青灯夜游asal: 2021-11-09 17:22:5810634semak imbas

Kaedah pelaksanaan: 1. Tambahkan gaya "display: none;" pada elemen untuk menyembunyikan elemen terlebih dahulu; 2. Gunakan pemilih ":hover" dan "display:block;" over display effect , sintaksnya ialah "elemen induk:elemen hover {display:block;}".

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Css untuk merealisasikan paparan dan meninggalkan kesan bersembunyi selepas tetikus melepasi

Idea pelaksanaan:

Pertama letakkan elemen Sembunyikan;
Kemudian gunakan pemilih ":hover" untuk menetapkan gaya hantaran tetikus--elemen paparan

Kod pelaksanaan:

<!DOCTYPE html>
<html>
	<head>
		<style>
			div {
				width: 520px;
				height: 50px;
				background-color: #008000;
				
			}
			span{
				color: azure;
				display: none;
			}
			div:hover span{
				display:block;
			}
		</style>
	</head>
	<body>
		<div>
			<span>hello</span>
		</div>
	</body>
</html>

Rendering:

Bagaimana untuk mencapai kesan paparan dan biarkan-sembunyi apabila tetikus melalui css

(Belajar perkongsian video: tutorial video css)

Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan paparan dan biarkan-sembunyi apabila tetikus melalui css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk mengalih keluar imej latar belakang pendua dalam cssArtikel seterusnya：Bagaimana untuk mengalih keluar imej latar belakang pendua dalam css

Artikel berkaitan

Lihat lagi