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:5810661semak 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;}".

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

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