兒童圖像不允許頂層更改onmouseover

遇到一個似乎只是IE問題的問題，我不知道如何解決它。我知道很多人這樣做，但我不知道如何使它與IE正常工作。兒童圖像不允許頂層更改onmouseover

我正在研究一個電子商務網站，我們希望在產品圖像上方懸停時覆蓋產品圖像頂部的某個產品的某些詳細信息。包含的DIV是JavaScript觸發器，但如果鼠標在擊中div之前擊中了圖像，div類更改將不會執行。

如果你去的jsfiddle，如果從右側或DIV的左側開始盤旋，它完美的作品。如果從底部或頂部開始，圖像展開到哪裏，則不會。

<div class="product"> 
        <div class="product_activitylayer" align="right" onmouseout="this.className='';this.className='product_activitylayer'" onmouseover="this.className='';this.className='product_activitylayer_hover'"> 
      </div> 

     <div class="product_containertop" align="center"> 
      <img src="images/demoimages/product.jpg" height="160"> 
     </div> 
     </div> 

.product { 
width:244px; 
height:221px; 
display:block; 
float:left; 
margin:0px 3px 5px 0px; 
border-top:solid; 
border-top-color:#10B0E5; 
border-top-width:6px; 
} 
.product_containertop { 
height:160px; 
width:244px; 
background:#FFFFFF; 
border-bottom:solid; 
border-bottom-width:1px; 
border-bottom-color:#C7EEFA; 
margin-bottom:2px; 
} 

.product_activitylayer { 
height:160px; 
width:244px; 
position:absolute; 
z-index:999; 

} 
.product_activitylayer_hover { 
height:160px; 
width:244px; 
position:absolute; 
z-index:999; 
background:#00CCFF; 
opacity:.5; 
filter:alpha(opacity="50"); 


}

來源

2013-09-20 John Egbert

一個改進版本更新：不透明度在層不能被視爲0，我需要查看在該層的對象（我剛開始移除他們爲了容易解釋，認爲這些對象與解決方案無關。這裏是更新的jsfiddle ... jsfiddle.net/NETJ4/2 –

約翰，

這一個是在IE中已知錯誤。如果任何元素具有透明背景 - IE不需要執行其上的懸停。您可以通過將背景應用於.product_activitylayer並將其設置爲不透明度來修復它。0

請參閱我更新了小提琴。 http://jsfiddle.net/NETJ4/1/

.product_activitylayer { 
    height:160px; 
    width:244px; 
    position:absolute; 
    z-index:999; 
    background:#00CCFF; 
    opacity:0; 
    filter:alpha(opacity="0"); 
}

或者這裏是使用jQuery http://jsfiddle.net/zzLr6/2/

來源

2013-09-20 23:55:10

嗨@shekhardesigner，謝謝你的迴應！你做的工作（實際上，除了jQuery之一，它似乎不起作用），但將不透明度設置爲零的要求是我要去的必須避開，因爲我需要查看activitylayer中的對象。爲了方便起見，我刪除了它們。看一個例子：http://jsfiddle.net/NETJ4/2 –

...繼續@shekharddesigner，所以我最初以爲如果我只是發佈一個圖層觸發和一個位於該觸發器層頂部舉行這些不同的圖標，我們會很好，但是在觸發圖層上放置一個圖層使其無法觸發，所以我又回到了原點。有什麼想法嗎？與IE的關鍵問題是，你必須設置它的背景顏色，認爲那裏有一個實際的圖層。然後，就像你所做的那樣，你必須將不透明度設爲0，這使我適合，因爲我在圖層中有對象。 –

使用spacer.gif（像素的透明圖像作爲背景，並在懸停時更改:)） –

兒童圖像不允許頂層更改onmouseover

回答

相關問題