title: Internet Explorer hiding iframe when its supposed to show on hover
body: <p>I created a simple mouse over that shows a youtube video using iframe embed. </p>
  
  <p>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. </p>
  
  <p>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. </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="a"&gt;cool&lt;/div&gt;
  &lt;div class="b"&gt;&lt;iframe width="560" height="315" src="//www.youtube.com/embed/xrMOBKHqqc8?rel=0&amp;autoplay=1" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.a { border: solid blue; height: 20px; }
  .b {display: none; border: solid green; }
  .a:hover + .b { display: block; }
  .b:hover { display: block; }
  </code></pre>
  
  <p><strong><a href="http://jsfiddle.net/X5br3/18/" rel="nofollow">JS FIDDLE LINK</a></strong></p>
  
  <p>BTW I am using IE 11. Firefox and Chrome do not have this problem.</p>
  
  <p>Any possible solutions/suggestions/workarounds?  </p>