CODEWITHSUNDEEP
cssinternet-exploreriframeyoutube
Display name
Display name

Reputation: 177

Internet Explorer hiding iframe when its supposed to show on hover

I created a simple mouse over that shows a youtube video using iframe embed.

The mouse over is: Hover A to show B and if you hover over B, B stays shown until you hover over something else that is not A or B.

If you notice, if I hover over the white space of the green box, which is B, it stays on, but as soon as I move mouse over the iframe/youtube video it disappears.

HTML

<div class="a">cool</div>
<div class="b"><iframe width="560" height="315" src="//www.youtube.com/embed/xrMOBKHqqc8?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>

CSS

.a { border: solid blue; height: 20px; }
.b {display: none; border: solid green; }
.a:hover + .b { display: block; }
.b:hover { display: block; }

JS FIDDLE LINK

BTW I am using IE 11. Firefox and Chrome do not have this problem.

Any possible solutions/suggestions/workarounds?

Upvotes: 2

Views: 1734

Answers (2)

lehi_net
lehi_net

Reputation: 524

How about using this code? http://jsfiddle.net/X5br3/37/

IE11 tested

.a { border: solid blue; height: 20px; }

.b {display: none; border: solid green; }

.a:hover + .b { display: block; }

.b:hover { display: block; }

/* added */
.b iframe {
    position:relative;
    z-index:-1;
}

Upvotes: 1

Jan Mellstr&#246;m
Jan Mellstr&#246;m

Reputation: 215

Add this to your css:

iframe { position: relative; z-index:-1; }

Can be .b iframe { also.

Upvotes: 5

Related Questions