可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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.

Here is my mark-up:

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

And here is my 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; }

Here is a Fiddle of the problem.

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.

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.

Lastly, the doctype is <!DOCTYPE html>

回答1:

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

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.

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

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, 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.

回答2:

It works if you give .photo-nav a background (e.g. rgba(0,0,0,0.25), however I have no idea why. I figured maybe it was a z-index problem, but giving the .photo-nav a z-index > 0 doesn't help here.

IE is only detecting mouse over the border as otherwise it seems to think the mouse is not over the photo-nav - same deal with JS mouse listener functions.

So things that make it work are :

a) Give the .photo-nav elements a background. b) Remove position:relative from .photo-content