Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk mencapai kesan perubahan warna pada hover tetikus dalam javascript

Bagaimana untuk mencapai kesan perubahan warna pada hover tetikus dalam javascript

青灯夜游
青灯夜游asal
2022-01-18 18:15:4310017semak imbas

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>

2

  

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>

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>

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!

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