Mouse Over แล้วเปลี่ยนสี background Column ของตารางด้วย CSS ลักษณะตามรูป

ทำยังไงลองดูโค้ดด้านล่างเป็นตัวอย่างนะจ๊ะ จะเข้าใจมากยิ่งขึ้น

Head

<style>

.menu{background-color:#F2ECD3; }

.menu-over{background-color:#E3D0B6;}

</style>

BODY

<table width="300"  border="2" cellspacing="0" cellpadding="0">

<tr>

<td onmouseover="this.className='menu-over'" onmouseout="this.className='menu'" class="menu" >menu1</td>

</tr>

<tr>

<td onmouseover="this.className='menu-over'" onmouseout="this.className='menu'" class="menu" >menu2</td>

</tr>

<tr>

<td onmouseover="this.className='menu-over'" onmouseout="this.className='menu'" class="menu" >menu3</td>

</tr>

</table>

จากโค้ดด้านบนจะประกอบด้วย 2 event ดังนี้

• onmouseover เปลี่ยนสีพื้นหลัง โดยเรียก Css-Class ที่ชื่อ menu-over
• onmouseout สีพื้นหลังกลับมาเหมือนเดิม ก็ให้เรียก Css-Class ที่ชื่อ menu ซึ่งเป็น css-class ที่ Tag-TD ใช้อยู่ตั้งแต่แรกแล้วนั่นเอง

คลิกดูไฟล์ที่นี่ (viewsource ดูเอานะ)