เมาส์ชี้แล้วเปลี่ยนสี HTML ด้วยคำสั่ง :hover ของ CSS

สอนเขียนโค้ดเมาส์ชี้แล้วเปลี่ยนสี HTML ด้วยคำสั่ง :hover ของ CSS บทความนี้แนะนำการใช้คำสั่ง :hover กับ element a เพื่อกำหนดให้เวลานำเมาส์ไปชี้ที่ลิงก์ หรือข้อความแล้วเปลี่ยนสี ด้วย CSS สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง เมาส์ชี้แล้วเปลี่ยนสี HTML ด้วยคำสั่ง :hover ของ CSS

<style>
    a:hover {
        color: green;
    }
    .text:hover {
        color: blue;
    }
</style>

<a href="https://www.devdit.com/">Devdit.com</a>
<br/>
<span class="text">เมาส์ชี้แล้วเปลี่ยนสี</text>

เมาส์ชี้แล้วเปลี่ยนสี HTML แนะนำให้ใช้คำสั่ง :hover ของ CSS ตัวอย่างใช้ a:hover ร่วมกับ color: green หมายความว่าทุกลิงก์เมื่อนำเมาส์ไปชี้จะเปลี่ยนเป็นสีเขียว และกรณี .text:hover ร่วมกับ color: blue หมายความว่าทุก elements ที่นำ class text ไปใช้งานเมื่อนำเมาส์ไปชี้จะเปลี่ยนเป็นสีฟ้า