GORAGOD.com

เคยบ้างมั้ยครับที่สร้าง Element เปล่าๆ ไม่มีอะไรอยู่ข้างใน แต่มันมีปัญหากับ IE อีตรงที่มันไม่สามารถรับอีเวนต์ของเมาส์ได้ (ไม่สามารถรับ Event mousemove ได้ หรือ ไม่สามารถเปลี่ยน Cursor ได้ เมื่อเมาส์เข้าไปใน Element เปล่าๆ นั้น)

<div id="test1">
   เหนือข้อความนี้มี Element เปล่าๆซ้อนอยู่ ลองเลื่อนเมาส์ไปมาบน Element นี้
    <span></span>
</div>
<style>
#test1 {
     position: relative;
     height: 20px;
     width: 80%;
}
#test1 span {
     position: absolute;
     top; 0;
     left: 0;
     height: 20px;
     width: 100%;
     cursor:pointer;
}

โค้ดด้านบนนี้จะทำงานได้ตามความต้องการบน Browser อื่นๆ (เปลี่ยนเมาส์เป็นรูปมือ) แต่บน IE จะไม่แสดงผลการเปลี่ยนแปลงใดๆเลย การแก้ไขก็ทำได้ง่ายๆครับด้วยการวาดสีพื้นหลังให้เต็ม Element แต่เนื่องจากเราต้องการไม่ให้มองเห็น Element ที่ซ้อนอยู่ ทำให้เราต้องใส่สีพื้นหลังเป็นแบบโปร่งใสครับ

<div id="test1">
   เหนือข้อความนี้มี Element เปล่าๆซ้อนอยู่ ลองเลื่อนเมาส์ไปมาบน Element นี้
    <span></span>
</div>
<style>
#test1 {
     position: relative;
     height: 20px;
     width: 80%;
}
#test1 span {
     position: absolute;
     top; 0;
     left: 0;
     height: 20px;
     width: 100%;
     cursor:pointer;
     background-color: #000000; /* IE7 IE8, CSS2 */
     filter: alpha(opacity=0); /* IE7 IE8 CSS2  */
     background-color: rgba(0,0,0,0); /* IE9 CSS3 */
}

อย่าลืมใช้บราวเซอร์อื่นๆเพื่อเปิดดูหน้านี้นะครับ เพื่อเปรียบเทียบการทำงานนะครับ