0

IE10以下を除く他のすべてのブラウザーで非常にうまく機能するHTMLおよびCSSコードがいくつかあります。基本的に、プロフィール写真 (アバター) を含むユーザー プロフィール ページがあります。

アバターにカーソルを合わせると、一部の 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 は次のとおりです (これはスタイラスなので、構文が少し取り除かれています)。

.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 に答える