เมื่อ IE ไม่สามารถรับ Event ใน 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;
}
เหนือข้อความนี้มี Element เปล่าๆซ้อนอยู่ ลองเลื่อนเมาส์ไปมาบน Element นี้
โค้ดด้านบนนี้จะทำงานได้ตามความต้องการบน 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 */
}
เหนือข้อความนี้มี Element เปล่าๆซ้อนอยู่ ลองเลื่อนเมาส์ไปมาบน Element นี้
อย่าลืมใช้บราวเซอร์อื่นๆเพื่อเปิดดูหน้านี้นะครับ เพื่อเปรียบเทียบการทำงานนะครับ