0

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

当您将鼠标悬停在头像上时，一些 CSS 会告诉头像 div 内的 div 将不透明度从 0 更改为不透明度 1。在该 div 内，有一个 Tweet 按钮 - 使用 iframe 和社交名流嵌入，但这无关紧要。

在 IE 中发生的情况是，您将鼠标悬停在头像上，该按钮将按原样显示，除非您将鼠标悬停在 Tweet 按钮上，否则它会“阻止”光标位于头像 div 的顶部，从而导致它消失。这是一个 IE 怪癖，它不应该这样，因为外部触发器 div 是其中所有内容的父级。

这是使用Handlebars的 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
4

1 回答 1

0

你试过了吗：

 .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-19T02:50:19.590 回答