Internet Explorer悬停行为无法正常工作

Question

Internet Explorer悬停行为无法正常工作

3

我遇到了IE9的问题。当悬停在.photo-nav上时，.photo-nav-icon应该变为可见状态。这在我尝试过的其他所有浏览器中都可以正常工作。

以下是我的标记：

<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。

请注意：Fiddle中的边框不是设计的一部分。它们只是用来展示框架，因为图片不可用。然而，值得注意的一点是，IE可以识别图片导航div的边框，然后会对悬停做出反应，但不会对div的主体作出反应。

另外，如果我将img更改为div并使用background-image，则IE似乎可以正常工作，但这会导致其他问题，因为我无法钩取背景图像的onload事件。

最后，doctype是<!DOCTYPE html>

- iGanja

我不确定你所说的“click”是什么意思，因为这是一个悬停问题，但正如我所说，边框并不是我的实际设计的一部分，但在Fiddle中悬停在其上确实会产生正确的效果。我确实考虑过绝对定位可能是个问题，但正如我所述，如果我将img更改为div，它就可以正常工作。 - iGanja

我的意思是 :hover .. 就是悬停在 .photo-nav 的左边框上，你会看到 .photo-nav-icon 出现，很明显它的宽度因某些原因而折叠，使它看起来好像没有起作用。 - Adrift

是的，边框确实起作用，但不幸的是，边框并不是我实际最终设计的一部分。我不确定为什么它会崩溃，因为我已经给.photo-nav一个宽度，而.photo-nav-icon也有一个宽度。 - iGanja

抓了几个小时的头发！ - iGanja

发现了一些有希望有所帮助的东西 - 如果在photo-nav中添加background-color:white;，它突然就能正常工作了。此外，我尝试在photo-nav中添加文本，当你悬停在文本上时它也能正常工作。也许这与没有高度而无法识别有关？ - Becuzz

显示剩余4条评论

2个回答

1

如果您为.photo-nav设置背景（例如rgba(0,0,0,0.25)），它就可以工作，但我不知道为什么。我想也许这是z-index的问题，但是将.photo-nav的z-index> 0并不能帮助解决问题。

IE仅在检测到鼠标悬停在边框上时才会响应，否则它似乎认为鼠标不在photo-nav上- JS鼠标监听函数也是如此。

使其工作的方法有：

a）为.photo-nav元素设置背景。 b）从.photo-content中删除position:relative。

- Woody

一个背景；是的，这是我发现有效的唯一方法。我很快会发布我的答案，但我希望有人能想出更优雅的解决方案，并提供IE为什么会表现出这样的行为的原因。移除相对位置确实会导致.photo-nav-icon div显示，但它们无法正确定位。感谢您的建议！ - iGanja

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- iGanja · Accepted Answer

除了其他人也遇到过同样的问题，我无法找到更多关于这个问题的任何信息。 Internet Explorer中悬停效果不起作用

正如Woody建议的那样，可以通过添加一些背景色来解决此问题，但是，即使透明度最小，这也不是我们想要的UI，因为导航必须是透明的。

我偶然发现的一个解决方法是将.opacity属性设置为.photo-nav-icon而不是.display属性：

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

我对这个解决方案并不是很满意，但它确实可行。