: 鼠标移动到 div 内的 iframe 上时的悬停问题 |IE浏览器

2022-01-22 00:00:00 iframe hover jquery html css

这是我的问题:

我在浏览器窗口左侧做了一个小条#blokje{left:-180px;position:absolute;...}，当用户将鼠标悬停在栏上时 --> 使用 #blokje:hover{left:0}; 改变位置所有这一切都很好，但现在我在 div 中添加了一个 google adsense 框架......除了在 IE 中(最常用的浏览器；广告......)之外，一切都很好.

I have made a small bar in the left side of the browserwindow #blokje{left:-180px; position:absolute;...}, when users hover over the bar --> the position changes using #blokje:hover{left:0}; All this works fine, but now I've added a google adsense frame inside the div and... everything works fine except in IE (most used browser; ads...)

看起来 div:hover 消失在框架上，导致烦人的闪烁，用户无法点击广告！

It looks like the div:hover disappears over the frame causing annoying flickering and users are unable to click ads !

我认为一个可能的解决方案是使用 jquery 而不是 css 来执行悬停效果.有人可以帮我把我的 CSS 翻译成 jQuery 吗?

I think that a possible solution would be to use jquery instead of css to perform the hover effect. Can someone translate my css for me to 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 解释问题；请注意，问题仅在 IE 中

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

http://jsfiddle.net/6FeH8/

测试环境中的在线示例没有缓存(注意:是关于左边的栏而不是 404 错误！)

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

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

推荐答案

以下应该可以达到你想要的效果.这是基于链接的答案.jQuery:

The following should achieve the effect you want. This is based on the linked answer. jQuery:

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

CSS:

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

相关文章