Bagaimana untuk mencapai kesan perubahan warna pada hover tetikus dalam javascript-tutorial js-php.cn

Bagaimana untuk mencapai kesan perubahan warna pada hover tetikus dalam javascript

青灯夜游

Lepaskan： 2022-01-18 18:15:43

asal

10100 orang telah melayarinya

Kaedah Javascript untuk melaksanakan perubahan warna tetikus: 1. Ikat elemen pada acara onmouseover dan tetapkan fungsi pemprosesan acara 2. Dalam fungsi pemprosesan acara, gunakan "elemen object.style.color attribute name="color Pernyataan nilai ";" menetapkan kesan perubahan warna elemen apabila peristiwa tuding dicetuskan.

Bagaimana untuk mencapai kesan perubahan warna pada hover tetikus dalam javascript

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi JavaScript 1.8.5, komputer Dell G3.

Idea: Untuk elemen peringkat atas dan elemen induk, elemen peringkat bawah dan elemen anak boleh bertukar warna. Hanya :hover dan pemilih css sahaja yang diperlukan. Elemen bawahan beroperasi pada elemen atasannya menggunakan peristiwa onmouseover dan onmouseout dalam JavaScript

Acara onmouseover akan berlaku apabila penunjuk tetikus bergerak ke elemen yang ditentukan.
Peristiwa onmouseout berlaku apabila penuding tetikus bergerak keluar dari objek yang ditentukan.

1 Kod HTML

<body>
	<div id="A">
		<div id="B">
			鼠标移动到 A div 时，我要变色
		</div>
	</div>
	<hr />
	<div id="AB">			
		<div id="a">
			一号 div
		</div>
		<div id="b">
			二号 div
		</div>
	</div>
</body>

Salin selepas log masuk

Nota: Adalah disyorkan untuk menulisnya sebelum tag penutup badan

<script type="text/javascript">
	document.getElementById("b").onmouseover=function(){
		document.getElementById("a").style.backgroundColor="green";
	}
	document.getElementById("b").onmouseout=function(){
		document.getElementById("a").style.backgroundColor="red";
	}
</script>

Salin selepas log masuk

3 🎜>

	<style type="text/css">
		#A{
			height: 400px;
			width: 400px;
			background-color: red;
		}
		#B{
			height: 300px;
			width: 300px;
			background-color: green;
			display: none;
		}
		#A:hover #B{
			display: block;
		}
		#a{
			height: 300px;
			width: 300px;
			background-color: red;
		}
		#b{
			margin-left: 50px;
			height: 300px;
			width: 300px;
			background-color: red;
		}
		#a:hover+#b {
			background-color: green;
		}
	</style>

Salin selepas log masuk

4. Rendering

Bagaimana untuk mencapai kesan perubahan warna pada hover tetikus dalam javascript

Bagaimana untuk mencapai kesan perubahan warna pada hover tetikus dalam javascript [Cadangan berkaitan:

tutorial pembelajaran javascript

]

Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan perubahan warna pada hover tetikus dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!