CODEWITHSUNDEEP
jqueryhtmlcssiframehover
Andy Harvey
Andy Harvey

Reputation: 61

using hover to display a hidden iframe which then loses focus in Internet Explorer

This is a similar question to the one posted here but I'm using an image as the hover point.

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.

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.

Thanks in advance.

EDIT: I also found this almost the same question but like the asker I don't have the skills with javascript to adapt it to my needs.

Here is my fiddle http://jsfiddle.net/GYNEW/

HTML

 <div class="social-exp">
    <img src="http://www.emotivewebdesign.com/wp-content/uploads/2013/06/twitter.png">
         <div id="icon-exp">
             <iframe src="http://www.emotivewebdesign.com/wp-content/uploads/misc/twitter.html"></iframe>
    </div>
 </div>

CSS

 .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;}

Upvotes: 4

Views: 2337

Answers (2)

Andy Harvey
Andy Harvey

Reputation: 61

I decided to get around this in the simplest way possible.

I just turned the image into a clickable link so in IE the hover effect doesn't work but the user can still follow the link anyway. Kind of feels like cheating but it's good enough. Thanks to Natalie for the other solution.

 <div class="social-exp">
   <a href="http://www.twitter.com/emotivewd/" target="_blank"><img src="http://www.emotivewebdesign.com/wp-content/uploads/2013/06/twitter.png"></a>
      <div id="icon-exp">
      <iframe src="http://www.emotivewebdesign.com/wp-content/uploads/misc/twitter.html" width: 278px; height: 95px scrolling="no" frameborder="0" style="border:none; overflow:hidden"></iframe>
      </div>
 </div>

Upvotes: 0

Natalie Hedstr&#246;m
Natalie Hedstr&#246;m

Reputation: 2631

The reason this is not working for you is because of the iframe. My guess is that IE doesn't treat the iframe as a part of html structure since the content is loaded from a different location.

The only solution I can think of to fix this i by using javascript(please correct me if I'm wrong and this can be done using css)

What you can do is to add an hover class to .social-exp div using jquery. This way the class will added when hovering over .social-exp and the iframe inside .social-exp.

$('.social-exp, .social-exp iframe').hover(function(){
  $(this).addClass('hover');
});

$('.social-exp, .social-exp iframe').mouseleave(function(){
  $(this).removeClass('hover');
});

Then you can simply show the div using the new hover class like so:

.social-exp.hover #icon-exp  {
   display: block !important;
   position: absolute;
   z-index:1;
}

Fiddle here

Upvotes: 1

Related Questions