Internet Explorer的悬停行为不工作

我有IE9的问题。当悬停.photo-nav时，.photo-nav-icon应该变为可见。这在我尝试过的每个其他浏览器中都能正常工作。Internet Explorer的悬停行为不工作

这里是我的加价：

<div class="photo-content"> 
    <img class="photo-img" src="/Images/empty.gif" /> 
    <div class="photo-nav prev" data-direction="prev"> 
     <div class="photo-nav-icon prev"></div> 
    </div> 
    <div class="photo-nav next" data-direction="next"> 
     <div class="photo-nav-icon next"></div> 
    </div> 
</div>

这里是我的CSS：

.photo-content { position: relative; width: 600px; height: 400px; margin: 0 auto; } 
.photo-img { width: 600px; height: 400px; display:block; } 
.photo-nav { position: absolute; height: 400px; width: 72px; } 
.photo-nav.prev { top: 0; left: 0; } 
.photo-nav.next { top: 0; right: 0; } 
.photo-nav-icon { height: 60px; width: 60px; display: none; } 
.photo-nav-icon.prev { margin: 170px 0 0 10px; } 
.photo-nav-icon.next { background-position: 0 -60px; margin: 170px 10px 0 0; } 
.photo-nav:hover > .photo-nav-icon { display: block; }

这是问题的一个Fiddle。

请注意;小提琴中的边框不是设计的一部分。他们只是在那里显示框架，因为图像不可用。然而，有一点需要注意的是，IE确实会识别照片导航div的边框，然后会对悬停进行响应，但不会响应div的主体。

另外一个注意事项：如果我将img更改为div并使用背景图像，IE似乎可以正常工作，但是这会导致其他问题，因为我无法/不知道如何挂接背景的onload事件图片。

最后，DOCTYPE是<!DOCTYPE html>

来源

2013-05-03 iGanja

我不知道你所说的“点击”，因为这是一个悬停问题的意思，但就像我说的，边界是不是我的实际设计的一部分，但盘旋在它的小提琴确实会导致正确的效果。我确实认为绝对定位是一个问题，但正如我所说，如果我将img更改为div，它可以正常工作。 – iGanja 2013-05-03 20:41:42

我的意思是'：hover' ..将鼠标悬停在'.photo-nav'的左边框上，你会看到'.photo-nav-icon'出现，显然它的宽度因为某种原因而折叠就像它不工作 – Adrift 2013-05-03 20:43:29

是的，边界确实有效，但不幸的是，边框不是我实际最终设计的一部分。我不知道为什么它会崩溃，因为我给了.photo-nav一个宽度，而.photo-nav-icon也有一个宽度。 – iGanja 2013-05-03 20:45:49

我一直无法找到其他比别人经历过同样的事情，这个问题的任何进一步相对。 Hover not working in Internet Explorer

正如伍迪建议，可以通过添加一些背景颜色来克服这个问题，但当然，即使最小的不透明度，这也不是我们想要的UI，因为导航必须是透明的。

一个补丁修复我所做的偶然发现是设置.photo-导航图标的不透明度属性，而不是显示属性：

.photo-nav-icon { background-image: url(/Images/nav.png); height: 60px; width: 60px; opacity:0; } 
.photo-nav:hover > .photo-nav-icon { opacity:1; }

这仅适用于图标本身仍然不响应将光标悬停在整个.photo-nav div上，我不喜欢使用不透明度，因为每个浏览器都有自己的处理方式。

所以，在其他SO后陈述，我只是增加了一个透明的gif图像作为.photo-NAV div的背景和解决的问题：

.photo-nav { position: absolute; height: 400px; width: 72px; background:url(/Images/empty.gif); }

我并不感到有这个解决方案，但它确实有效。

来源

2013-05-04 20:11:49 iGanja

它感觉像是一个错误，因为其他人都按预期处理你的代码。尽管这很烦人，但我只是在描述缺陷行为的CSS中添加一条解释性评论。假设你不需要ie8的支持，你可以去rgba（0,0,0,0）的背景，尽管这也是一个黑客攻击 – Woody 2013-05-05 07:39:27

如果你给.photo-NAV背景（如RGBA（0,0,0,0.25），但我不知道为什么。我想也许这是它的工作原理一个z-index的问题，但给.photo-nav z-index> 0在这里没有帮助

IE只检测鼠标在边界上，否则它似乎认为鼠标不在照片-nav - 与JS鼠标监听器功能相同的处理

因此，它的工作原理是：

a）给.photo-nav元素一个背景。 b）拆卸位置：从.photo内容

来源

2013-05-04 14:57:55 Woody

背景;是的，这是我发现的唯一工作。我会很快发布我的答案，但我希望有人会想出更优雅的东西，并提供一个为什么IE的行为是这样的原因。删除相对位置确实会导致.photo-nav-icon div显示，但是否则无法正确定位。感谢您的想法！ – iGanja 2013-05-04 17:04:44

Internet Explorer的悬停行为不工作

回答

相关问题