Rumah > hujung hadapan web > tutorial css > Bagaimana untuk menetapkan tetikus untuk memaparkan imej selepas menghantar elemen dalam css

Bagaimana untuk menetapkan tetikus untuk memaparkan imej selepas menghantar elemen dalam css

青灯夜游
Lepaskan: 2023-01-07 11:44:44
asal
10935 orang telah melayarinya

Dalam css, anda boleh menggunakan pemilih ":hover" untuk mencapai kesan memaparkan gambar apabila tetikus melepasi elemen Pemilih ":hover" digunakan untuk menentukan gaya khas yang ditambahkan apabila tetikus penunjuk terapung pada elemen Format sintaks "elemen" :hover{background: url(alamat gambar);}".

Bagaimana untuk menetapkan tetikus untuk memaparkan imej selepas menghantar elemen dalam css

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

Dalam CSS, anda boleh menggunakan pemilih ":hover" untuk mencapai kesan memaparkan imej apabila tetikus melepasi elemen.

: Pemilih tuding menentukan gaya khas yang ditambah apabila tetikus dialihkan ke atas elemen.

Mari kita lihat contoh kod di bawah:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			div{
				width: 400px;
				height: 300px;
				border: 1px solid red;  
			}
			div:hover{
				background: url(img/1.jpg);
				background-size: 400px;
			}
		</style>
	</head>
	<body>
		<div>将鼠标移动到div盒子中:</div>

	</body>
</html>
Salin selepas log masuk

Rendering:

Bagaimana untuk menetapkan tetikus untuk memaparkan imej selepas menghantar elemen dalam css

(Perkongsian video pembelajaran: tutorial video css)

Atas ialah kandungan terperinci Bagaimana untuk menetapkan tetikus untuk memaparkan imej selepas menghantar elemen dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan