Question

我有一些HTML和CSS代码在IE10及以下版本的其他所有浏览器中运行良好，令人惊讶。基本上，有一个用户个人资料页面及其个人资料图片（头像）。

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

在IE中发生的事情是你将鼠标悬停在头像上，按钮将按照它的意图显示，除非你将鼠标悬停在推文按钮上，它“阻止”光标位于头像div的顶部，这导致它消失。这是一个IE怪癖，它不应该这样，因为外部触发器div是其中所有内容的父级。

的HTML

<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

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

1 个答案: