如何防止IE使用子元素阻塞懸停觸發器？

我有一些HTML和CSS代碼，除了IE10及其以外的瀏覽器，其他瀏覽器都可以很好地工作，令人驚喜。基本上，有一個用戶個人資料頁面及其個人資料圖片（頭像）。如何防止IE使用子元素阻塞懸停觸發器？

當您將鼠標懸停在頭像上時，某些CSS會告訴頭像div中的div，將不透明度從0更改爲不透明度1.在該div內部，有一個Tweet按鈕 - 使用iframe和Socialite,嵌入，但這無關緊要。

在IE中發生的事情是，您將鼠標懸停在頭像上，並且該按鈕將按照其意圖顯示，除非您將鼠標懸停在Tweet按鈕上，則會「阻止」光標位於頭像div之上，這會導致它消失。這是一個IE怪癖，它不應該這樣做，因爲外部觸發器div是其中所有內容的父代。

<div class="profile-avatar" style="background-image:url({{avatar_url}})"> 
    <div class="avatar-overlay"> 
    <div class="tweet-profile"> 
     <a href="//twitter.com/share" class="socialite twitter-share" data-count="none" data-text="Check out my profile!" data-url="{{url}}" rel="nofollow" target="_blank"></a> 
    </div> 
    </div> 
</div>

HTML和這裏的CSS（它Stylus,所以稍微剝開語法）：

.profile-avatar 
    @extend .background-cover 
    height 120px 
    margin-bottom 10px 
    position relative 

    &:hover 
    .avatar-overlay 
     opacity 1 

.tweet-profile 
    position absolute 
    top 50px 
    left 32px 

    &:hover 
    opacity 1 

.avatar-overlay 
    position absolute 
    left 0px 
    top 0px 
    width 100% 
    height 100% 
    background-color rgba(0,0,0,0.5) 
    opacity 0 
    transition opacity 250ms

來源

2012-12-19 Benjamin Humphrey

手寫筆！我的眼睛！ gaahhhh他們燃燒！哪裏有一些水把它們拿出來，哦，這裏是SASSssssssss – Jason

你嘗試：

.profile-avatar .tweet-profile 
    position absolute 
    top 50px 
    left 32px 
    z-index 999999999 

    &:hover 
     opacity 1

而且，懸停在：

.profile-avatar 
    @extend .background-cover 
    height 120px 
    margin-bottom 10px 
    position relative 

    &:hover 
    .avatar-overlay 
     opacity 1

看起來不對，因爲它有一個類內懸停？我必須自己嘗試一下手寫筆，但我猜測它會是：

&:hover .avatar-overlay 
    opacity 1

來源

2012-12-19 02:50:19

是的，z-index可悲地沒有任何效果。 –

這就是觸發它的原因。所以我說，當你將元素A懸停時，然後改變A的子元素B的不透明度。 –

這是IE的一個已知問題。你可能不得不求助於JavaScript來解決這個問題。我有一個類似的問題，我可以通過[指針事件]（http://caniuse.com/#feat=pointer-events）和一些好的ol'-fashioned JS – Jason

如何防止IE使用子元素阻塞懸停觸發器？

回答

相關問題