html - IE10 - div :hover Only Partially Working, 在内部 div 链接之间中断

Question

在尝试找到解决此问题的方法时，我发现我并不是唯一遇到 IE :hover 问题的人，但我还没有找到一个有效的解决方案。

菜单在当前版本的 Chrome 和 Firefox 中完美运行，但在 IE10 中出现故障(尚未测试其他版本)。

我在页面顶部中心有一个 ~1/4 圆的下拉菜单，当鼠标悬停在上面时，它会扩展到大约 3/4 的圆。它有四个部分(链接)，当鼠标悬停在上面时每个部分会单独展开以显示子链接。

问题是 :hover 效果似乎只在悬停在实际链接上时有效，尽管 :hover 应用于包含的 div。这不会太糟糕，除非当一个部分扩展链接文本之间的每个空格时导致该部分关闭。它使菜单非常不连贯且难以使用。

编辑:Fiddle 链接 --> http://jsfiddle.net/2GzsQ/2/

这是菜单的 HTML:

<div id="navholder" class="">
            <div id="navservice" class="outernav">
                <a href="" alt="Services"><h2>Services</h2></a>
                <div id="innavservice" class="innernav">
                    <a href="">Specimens</a> | <a href="">Collection Access</a> | <a href="">Identification</a> | <a href="">Books</a><br>
                    <a href="">Destructive Sampling</a> | <a href="">Loans</a> | <a href="">Specimen Submission</a><br>
                    <a href="">Specimen Labels</a> | <a href="">Quarantine</a> | <a href="">Data Use Conditions</a><br>
                    <a href="">Specimen Images</a>
                </div>
            </div>
            <div id="navprojects" class="outernav">
                <a href="" alt="Projects"><h2>Projects</h2></a>
                <div id="innavprojects" class="innernav">
                    <a href="">Legumes of Arizona</a> | <a href="">Biodiversity Informatics</a> | <a href="">Floras</a><br>
                    <a href="">Nichol Turk's Head Cactus Working Group</a> | <a href="">Section 6</a><br>
                    <a href="">National Park Service</a> | <a href="">Pringle's Arizona Catalog</a><br>
                    <a href="">Type Imaging</a>
                </div>
            </div>
            <div id="navresources" class="outernav">
                <a href="" alt="Resources"><h2>Resources</h2></a>
                <div id="innavresources" class="innernav">
                    <a href="">Convolvulaceae Pollen Atlas</a> | <a href="">Shantz Photographs</a><br>
                    <a href="">Convolvulaceae of Sonora</a> | <a href="">Floras for Other Regions</a><br>
                    <a href="">Arizona Floras and Floristic Works</a> | <a href="">Publications</a><br>
                    <a href="">Homer Shantz</a> | <a href="">Sample Photos</a> | <a href="">Links</a>
                </div>
            </div>
            <div id="navariz" class="outernav">
                <a href="" alt="About"><h2>About</h2></a>
                <div id="innavariz" class="innernav">
                    <a href="">What is an Herbarium</a> | <a href="">About ARIZ</a><br>
                    <a href="">People</a> | <a href="">Associated Researchers</a><br>
                    <a href="">Our Logo</a> | <a href="">History</a> | <a href="">Donations</a>
                </div>
            </div>
        </div>

并且，这是菜单的 CSS:

/* div containing drop-down top white circle navigation */
#navigationc {
    width: 500px;
    height: 375px;
    position: relative;
    margin: 0 auto 0 auto;
    top: -150px;
    z-index: 3;
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 1.5;
    -webkit-transition: top 0.5s;
    -moz-transition: top 0.5s;
    transition: top 0.5s;
}

/* drop-down functionality */
#navigationc:hover {
    top: 0;
}

/* Circle navigation */

/* moves #navservice div to top of drop-down navigation */
#navholder:hover #navservice {
    margin-top: 5px;
}

/* contains the collection of links within each navigation section */
.innernav {
    height: 0px;
    overflow: hidden;
    -webkit-transition: height 0.5s;
    -moz-transition: height 0.5s;
    transition: height 0.5s;
}

/* the first main section of the drop-down navigation menu */
#navservice {
    margin-top: 155px;
    -webkit-transition: margin-top 1s;
    -moz-transition: margin-top 1s;
    transition: margin-top 1s;
}

/* expands each menu section when it is hovered over to expose child links */
#navservice:hover #innavservice {
    height: 105px;
}

#navprojects:hover #innavprojects {
    height: 105px;
}

#navresources:hover #innavresources {
    height: 105px;
}

#navariz:hover #innavariz {
    height: 105px;
}

也许这只是我不得不接受的问题，但我觉得一定有解决办法。谢谢。

注意 - 以上所有空 href 都是真实链接，但链接已被删除以发布在 SE 上。

Answer 1

我的问题的解决方案是将 SVG(一个 460 像素的半透明白色圆圈)设置为包含它的 div 的背景图像。

最初制作主题时出于某种原因我一开始就避免这样做，但现在看来这不再是问题。

最初的问题:在位于 (z-index) 图像(在本例中尝试使用 SVG 和 PNG)上方的 div(以及这个 div 中的 div)上使用 :hover 伪类功能不全在 IE10 中。 :hover 类中定义的效果在悬停在 div 内 anchor 元素之间或之外的任何空间时失败(应用了 :hover)。

也许有更好理解的人可以解释为什么会发生这种情况，希望这能帮助别人。