I'm encountering an issue with my HTML and CSS code that seems to work perfectly in all browsers except for IE10 and below. The problem arises on a user profile page where there is a profile picture (avatar).
When hovering over the avatar, the CSS triggers a div inside the avatar div to transition from 0 opacity to 1. Within this div, there is a Tweet button embedded using an iframe and Socialite, though this detail is not relevant to the issue at hand.
In IE, when hovering over the avatar, the button displays correctly as intended. However, upon attempting to hover over the Tweet button itself, it blocks the cursor interaction with the avatar div causing it to disappear. This behavior in IE is unexpected since the outside trigger div should encompass everything within it.
Below is the HTML snippet utilizing 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>
And here's the CSS (written in Stylus syntax):
.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