在尝试找到解决此问题的方法时，我发现我并不是唯一一个使用IE浏览器：悬停问题，但我找不到一个可行的解决方案。
菜单适用于当前版本的Chrome和Firefox，但在IE10中有效（未测试其他版本）。
我在页面的顶部中心有一个~1 / 4圈下拉菜单，当盘旋时它会扩展到圈子的大约3/4。它有四个部分（链接），每个部分在悬停时分别展开以显示子链接。
问题是：悬停效果似乎仅在将鼠标悬停在实际链接上时起作用，尽管：hover应用于包含div。这不会太糟糕，除了当一个部分扩展链接文本之间的每个空格导致该部分关闭。它使菜单变得非常不稳定且难以使用。
编辑：链接到小提琴 - ＆gt; 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;
}
也许这只是一个我必须接受的问题，但我觉得必须有一个解决方案。谢谢。
答案 0 :(得分：0)
我的问题的解决方案是将SVG（一个460px的半透明白色圆圈）设置为包含它的div的背景图像。
当最初制作主题时，我出于某种原因首先避免这样做，但它似乎不再是一个问题。
原始问题：在div上使用：hover伪类（以及在这一个中的div），位于（z-index）之上（z-index）图像（在这种情况下尝试过SVG和PNG）功能不全在IE10中。当悬停在div中的锚元素之间或之外的任何空间时，悬停类中定义的效果失败（其中：悬停应用于）。
也许有更好理解的人可以解释为什么会发生这种情况，并希望这会帮助某人。