IE8下元素背景為透明時，hover事件失效的bug

在IE8下，當一個div設定了背景為透明或者不設定任何背景時，在該div上註冊的hover事件是不會觸發的。

<div class='outer'>
    <div class='inner'>
        此處有文字
    </div>
</div>

.outer{
    width:100px;
    height:100px;
}

.outer:hover{
    color:#000000;
}

上面這段程式碼中，給outer加上了hover的偽類，正常情況下，滑鼠移到outer的100*100的區域中，就會觸發hover，並使得內部的文字的顏色
變成黑色。但是在IE8下面，滑鼠在除文字以往的區域都不回觸發hover，只有在滑鼠位於文字上時，才會觸發。

針對於這個bug，有如下解決方案：

1.給outer設定真實的背景圖片，不過是一張1*1的透明png。

.outer{
    background-image:url('1.png');
}

2.給outer設定一個不存在的圖片，不過會產生404請求。

.outer{
    background-image:url('.');
}

更多的參考資料可看如下連結：

http://blog.rednael.com/2009/09/01/TrappingMouseEventsOnTransparentInputElementsOrTextareasInIE.aspx

原文出處：http://www.foreverpx.cn
轉載請註明出處。