jquery - :hover issue when mouse moves over an iframe which is inside the div | Internet Explorer -

here problem:

i have made small bar in left side of browserwindow #blokje{left:-180px; position:absolute;...}, when users hover on bar --> position changes using #blokje:hover{left:0}; works fine, i've added google adsense frame inside div and... works fine except in ie (most used browser; ads...)

it looks div:hover disappears on frame causing annoying flickering , users unable click ads !

i think possible solution use jquery instead of css perform hover effect. can translate css me 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 issue; please note problem in ie

http://jsfiddle.net/6feh8/

the live example online in test environment not cached (note: it's bar in left not 404 error !)

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

the following should achieve effect want. based on linked answer. jquery:

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

css:

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