如何防止IE用子元素阻止悬停触发器？

Question

我有一些超文本标记语言和CSS代码，它们在除IE10和以下浏览器之外的其他所有浏览器中都能很好地工作，令人惊讶。基本上，有一个用户个人资料页面，上面有他们的个人资料图片(头像)。

当你将鼠标悬停在头像上时，一些CSS会告诉头像div中的div将不透明度从0更改为不透明度1。在该div中，有一个Tweet按钮-使用iframe和Socialite,嵌入，但这并不重要。

在IE中发生的事情是，你将鼠标悬停在头像上，按钮将按原意显示，但当你将鼠标悬停在Tweet按钮上时，它会“阻止”光标位于头像div上，这会导致它消失。这是IE的怪癖，它不应该是这样的，因为外部的触发器div是它里面所有东西的父级。

下面是使用Handlebars:的超文本标记语言

<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>

这是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

Answer 1

你有没有尝试：

 .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