: problem with hover when mouse moves over iframe inside div | Internet explorer

Question

Here is my problem:

I made a small strip in the left part of the browser window #blokje{left:-180px; position:absolute;...}when users hover over the panel → changing position using #blokje:hover{left:0}; All this works fine, but now I added the google adsense framework inside the div and ... everything works fine, except for IE (the most used browser advertising ...)

It seems like the div: hovering disappears frame by frame, causing annoying flickering, and users can't click on ads!

I think a possible solution would be to use jquery instead of css to accomplish the hover effect. Can someone translate my css for me in jQuery?

#blokje{width:200px; height:200px; background:#F1F1F1; position:relative; left:-180px; color:black; }
#blokje:hover{left:0;}
#blokje #tit{position:absolute; width:30px; height:200px; background:black; right:0; top:0; }

fiddler explains the problem; note that the problem is only in IE

http://jsfiddle.net/6FeH8/

The online screen in the test environment is not cached (note: this is about a woman on the left, not a 404 error!)

http://kramels.x10.mx/goedkoopste-autolening.tk/

Answer 1

The following should achieve the desired effect. This is based on a related answer. JQuery:

    if($.browser.msie){
        $("#blokje iframe").on("hover",function(){ 
            $(this).parents("#blokje").toggleClass("hover");
        });
    }

CSS

#blokje:hover,#blokje.hover{left:0;}