ฉันจะไม่พูดเรื่องไร้สาระมากฉันจะโพสต์รหัสสำคัญให้คุณ รหัสเฉพาะมีดังนี้:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> เอกสารใหม่ </title> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <link type = "text/css">. box {width: 1000px; margin: 0 auto; ความสูง: 500px; เส้นขอบ: 1px ของแข็งสีเขียว;}. tbox {ความกว้าง: 150px; ความสูง: 30px; เส้นขอบ: 1px ของแข็ง #585858; มาร์จิ้น: 10px 10px; พื้นหลัง-สี: #eee; แนวตั้ง-แนว: กลาง; พื้นหลัง: url (re_code2.png) ไม่ต้องทำซ้ำ #EEE 8PX 8PX; พื้นหลัง-ขนาด: 15PX;}. PTES {ความกว้าง: 115PX; ความสูง: 30PX; มาร์จิ้น: 10px 10px;}. PB1: โฮเวอร์ {พื้นหลัง-สี: #eee; แนวตั้ง-แนว: กลาง, พื้นหลัง: url (re_code1.png) ไม่ซ้ำ #EEE 8PX 8PX; พื้นหลัง--ขนาด: 15PX;} </สไตล์> style = "พื้นหลังสี: #fff;"> <div> <div onmouseout = "this.className = 'tbox'" onmousemove = "this.className = 'tbox1 pb1'"> <div style = "float: left; width: 30px; ความสูง: 30px;" type = "รหัสผ่าน" placeolder = "โปรดป้อนรหัสผ่าน" value = ""/> </div> </div> </div> </body> </html>ข้างต้นคือการแบ่งปันที่บรรณาธิการแนะนำให้คุณรู้จัก รหัส JS ใช้กล่องอินพุตและรูปภาพเพื่อเปลี่ยนสไตล์ในเวลาเดียวกัน ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!