title: using hover to display a hidden iframe which then loses focus in Internet Explorer
body: <p>This is a similar question to the one posted <a href="https://stackoverflow.com/questions/11939576/hover-issue-when-mouse-moves-over-an-iframe-which-is-inside-the-div-internet">here</a> but I'm using an image as the hover point.</p>
  
  <p>So, I'd like the iframe to remain in focus when the mouse moves over it so the link inside can be clicked, the code currently works in FF, Chrome, Safari but not IE.</p>
  
  <p>I've played around with the java script from that other post but I just cant get it working. I'd really appreciate it if someone could take a look and help me out.</p>
  
  <p>Thanks in advance.</p>
  
  <p>EDIT: I also found <a href="https://stackoverflow.com/questions/12537023/hover-not-working-with-iframe-in-ie9?rq=1">this</a> almost the same question but like the asker I don't have the skills with javascript to adapt it to my needs.</p>
  
  <p>Here is my fiddle <a href="http://jsfiddle.net/GYNEW/" rel="nofollow noreferrer">http://jsfiddle.net/GYNEW/</a></p>
  
  <p>HTML</p>
  
  <pre><code> &lt;div class="social-exp"&gt;
      &lt;img src="http://www.emotivewebdesign.com/wp-content/uploads/2013/06/twitter.png"&gt;
           &lt;div id="icon-exp"&gt;
               &lt;iframe src="http://www.emotivewebdesign.com/wp-content/uploads/misc/twitter.html"&gt;&lt;/iframe&gt;
      &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code> .social-exp {width: auto; padding: 0 5px 10px; float: left}
  
   #icon-exp {display: none;}
  
   .social-exp:hover #icon-exp  {display: block !important; position: absolute; z-index:1;}
  
   iframe {width: 180px; background: #fff; border: 1px solid #000;}
  </code></pre>