เมาส์ชี้แล้วเปลี่ยนรูป HTML ด้วย hover และ background-image

เมาส์ชี้แล้วเปลี่ยนรูป HTML ด้วย hover และ background-image บทความนี้สอนเขียน HTML ร่วมกับ CSS เพื่อสร้างโค้ดสำหรับเวลาผู้ใช้งานนำเมาส์ชี้ที่รูป และรูปภาพดังกล่าวเปลี่ยนรูป สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง เมาส์ชี้แล้วเปลี่ยนรูป HTML ด้วย hover และ background-image

<style>
    #checked {
        background-image: url('https://www.devdit.com/chmod/post/images/200525651025.jpg');
        width: 125px;
        height: 125px;
        cursor: pointer;
    }
    #checked:hover {
        background-image: url('https://www.devdit.com/chmod/post/images/200525651024.jpg');
    }
</style>

<div id="checked"></div>

เมาส์ชี้แล้วเปลี่ยนรูป HTML ด้วย hover และ background-image มีรายละเอียดดังนี้

1. #checked คือ id ที่โหลดรูปภาพแรก (รูปตอนที่เมาส์ไม่ได้ชี้) พร้อมขนาดของรูปภาพ

2. #checked:hover คือ id ของข้อ 1 แต่มีการใช้คำสั่ง hover สำหรับสร้างเหตุการณ์เมื่อเมาส์ชี้แล้วเปลี่ยนรูป โดยใช้คำสั่ง background-image

3. นำ id #checked ไปใช้งานกับ div ของ HTML เพื่อแสดงรูปภาพบนหน้าเว็บไซต์