ie 透明元素遮擋的元素仍能響應滑鼠事件

如果乙個元素被另乙個元素遮蓋，不論遮蓋元素的背景色是否是 'transparent'，也不論遮蓋元素的透明度是否為全透明，被遮蓋元素是不能響應使用者的滑鼠事件的。

關於 'background-color' 請參考 w3c css 2.1 規範 14.2.1 'background-color' 中的內容。

關於 'opacity' 請參考 w3c css 3 color module 規範 3.2 transparency: the 'opacity' property 中的內容。

關於 'filter:alpha' 請參考 msdn alpha filter 中的內容。

在 ie6 ie7 ie8 中被透明元素遮擋的元素仍能響應滑鼠事件，而其他瀏覽器則不能響應。

如果頁面在設計時依賴 ie6 ie7 ie8 的此特性，將造成其他瀏覽器的使用者無法操作部分區域。

ie6 ie7 ie8

被乙個元素遮擋，又能完全可見，只有一種情況，那就是遮擋元素完全透明。

讓乙個元素完全透明有兩種方式：

設定背景色為透明，如 'background-color:transparent'。事實上 'background-color' 的預設值即為 'transparent'；

設定 'opacity:0'（標準），或採用濾鏡 'filter:alpha(opacity=0)'（僅 ie 支援）

2.1. 遮擋元素採用設定 'background-color:transparent' 的方式時

在 ie6 ie7 ie8 下，遮擋元素的行框範圍內，其下被遮擋的行內元素可響應滑鼠事件，而塊級元素則不能。另外在 firefox safari chrome 下，被遮擋的元素，不管是塊級元素還是行內元素，都無法響應滑鼠事件。

分析如下**：

please put your mouse on

以上**在各個瀏覽器下的結果彙總如下：

ie6ie7

ie8firefox

safari

chrome

當遮擋元素的 'background-color' 不為 'transparent' 時，ie6 ie7 ie8 中被遮擋的元素不響應滑鼠事件。

修改以上**中遮擋元素的 'bacground-color' 為 'green'，此時在各個瀏覽器下的表現將一致：

2.2. 遮擋元素採用設定 'opacity' 或 'filter:alpha' 為0時

此時在所有瀏覽器下，遮擋元素行框範圍內，被遮擋元素都無法響應滑鼠事件。分析如下**：

please put your mouse on

這時，所有瀏覽器下表現一致：

可見：在 ie6 ie7 ie8 下，當遮擋元素的 'background-color' 為 'transparent' 時，其下被遮擋的行內元素可響應滑鼠事件，而塊級元素則不能。而在其它瀏覽器下，被遮擋的元素都無法響應滑鼠事件，無論它是塊級元素還是行內元素。