我的文字与代码中的框一起使用时出现问题。
这是演示: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>

最佳答案

中的Z索引

#wrap:hover > a.exp


造成了问题。我认为这与其他Z索引的事物冲突。如果您正在寻找一种隐藏方法,则可以始终使用visible:hidden和visible:visible。

关于html - CSS悬停在框上会使文本抖动,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/21081414/

10-10 08:33