html - CSS 悬停在框上会使文本抖动

Question

我在使用代码中的框处理文本时遇到一些问题。 这是演示:http://jsfiddle.net/K6wy3/1/

那是我遇到问题的代码片段。我的鼠标悬停框可以正常工作，但是当您将鼠标悬停在它上面时，文本会一直闪烁和抖动。有什么解决办法吗？

提前致谢。 CSS:

ul {list-style: none; font-family: Arial,Helvetica,sans-serif,serif; font-size: 12px          color: #000;}
a.exp {width: 145px; height: 34px; position: absolute; top: 0px; left: 0px; 
               opacity:0.0; filter:alpha(opacity=0); z-index: 100;}
div.exp {display: none; position: absolute; top: 100px; left: 0px;}
a.exp:hover + div.exp {display: inline; z-index: 300;}
#wrap:hover > a.exp {display: inline; position: absolute; top: 0px; left: 0px; width: 787px; height: 450px; 
                     opacity:100.0; filter:alpha(opacity=100); z-index: 200;}
#wrap:hover > .exp {display: inline;} 
img.allcategoriesBTN:hover {z-index: 0;}
.topHalf {
    background-color: #222;
    opacity:0.0;
    filter:alpha(opacity=00);
}
.botHalf {
    background-color: #555555;
}
.background {
    position: absolute;
    top: -2px;
    left: -3px;
}           
.backbox { 
    padding: 0;
    margin: 0;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0px;
    width: 787px;   
    height: 34px;
    color: #000;
    float:left;
    background-color: #999;
}

HTML:

<div id="wrap">
    <a class="exp" href="#url" tabindex="1">
        <TABLE class="background" width=100.5% height=100% cellpadding=0 cellspacing=0 border=0>
            <TR>
                <TD width=100.5% height=8% class="topHalf">&nbsp;</TD>
            </TR>
            <TR>
                <TD width=100.5% height=92% class="botHalf">&nbsp;</TD>
            </TR>
        </TABLE>
    </a>
    <div class="exp">
        <ul id="list">             
            <li><a href="http://www.google.co.uk/">Google</a>
            <li><a href="musings.html">Musings</a>
            <li><a href="town.html">My town</a>
            <li><a href="links.html">Links</a>
        </ul>
        <img class="allcategoriesBTN" src="http://www.mediafire.com/convkey/2a45/702142qw7au3hdufg.jpg?size_id=2">
    </div>
</div>

Answer 1

z-index在

#wrap:hover > a.exp

是导致问题的原因。我假设它与其他 z 索引的东西冲突。如果您正在寻找隐藏它的方法，您始终可以使用 visibility:hidden 和 visibility: visible。