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:439996semak 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.
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
[Cadangan berkaitan:
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!