Internet Explorer悬停行为不工作 [英] Internet Explorer hover behavior not working
问题描述
我遇到了IE9的问题。当悬停.photo-nav时.photo-nav-icon应该可见。
I am having issue with IE9. When hovering .photo-nav the .photo-nav-icon should become visible. This works fine in every other browser I have tried.
这是我的标记：
<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; }
这里是小提琴的问题。
请注意;小提琴中的边框不是设计的一部分。他们只是在那里显示框架，因为图像不可用。然而，一个有趣的注意是，IE确实识别照片导航div的边框，然后会对悬停，而不是div的身体作出反应。
Please note; the borders in the Fiddle are NOT part of the design. They are only there to show the framework since the images are not available. However, one interesting note is that IE does recognize the border of the photo-nav div and will then react to the hover, but not the body of the div.
一其他注意：如果我将img更改为div并改用background-image，IE似乎可以正常工作，但这会导致其他问题，因为我无法/不知道如何挂钩背景图像的onload事件。
One other note: If I change the img to a div and use the background-image instead, IE seems to work correctly, however this causes other issues, as I unable/unaware how to hook the onload event of a background image.
最后，doctype为<！DOCTYPE html>
Lastly, the doctype is <!DOCTYPE html>
推荐答案
我已经无法找到任何进一步关于这个问题，除了其他人经历过同样的事情。 无法在Internet Explorer中使用
I have been unable to find anything further about this problem other than others have experienced the same thing. Hover not working in Internet Explorer
根据Woody的建议，这个问题可以通过添加一些背景颜色来克服，当然，即使最小的不透明度，这不是我们想要的UI，因为导航必须是透明的。
As Woody suggested, this problem can be overcome by adding some background color, but of course, even with minimal opacity, this is not the UI we want as the navigation must be transparent.
我遇到的一个修复是设置.photo-nav-icon的opacity属性，而不是显示属性：
One fix I did stumble across was to set the opacity property of the .photo-nav-icon rather than the display property:
.photo-nav-icon { background-image: url(/Images/nav.png); height: 60px; width: 60px; opacity:0; }
.photo-nav:hover > .photo-nav-icon { opacity:1; }
这只适用于图标本身，并且仍然不会响应整个的悬停。照片导航div，我不喜欢使用不透明度，因为每个浏览器都有自己的处理方式。
This only works for the icon itself and still doesn't respond to a hover over the entire .photo-nav div, and I don't like using opacity that much as every browser has its own way of handling it.
因此，正如在其他SO post，我只是添加了一个透明的gif图像作为.photo-nav div的背景，并解决了问题：
So, as is stated in the other SO post, I simply added a transparent gif image as the background of the .photo-nav div and that solved the problem:
.photo-nav { position: absolute; height: 400px; width: 72px; background:url(/Images/empty.gif); }
我对此解决方案不满意，但它确实有效。
I am not thrilled with this solution, but it does work.
这篇关于Internet Explorer悬停行为不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
