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。

Answer 2

解决的问题：我正在使用的标签似乎没有正确选择#list。我只是简单地格式化了HTML并在#list上使用了：hover css函数来停止抖动。

html {-webkit-animation: safariSelectorFix infinite 1s;}
        @-webkit-keyframes safariSelectorFix {
        0% {zoom:1;} 
        100% {zoom:1;}
        }

        /* Line Brake (All Catergories) */
        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=00); z-index: 100;}
        #list {visibility: hidden; position: absolute; top: 100px; left: 0px;  z-index: 200;}
        a.exp:hover + #list {visibility: visible;}
        #wrap:hover > a.exp {position: absolute; top: 0px; left: 0px; width: 787px; height: 450px; 
                             opacity:1.0; filter:alpha(opacity=01);}
        #wrap:hover > #list {visibility: visible;}
        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: #111;
        }

    img.allcategoriesBTN {
        width:140px;
        height:34px;
        background: url(http://www.mediafire.com/convkey/2a45/702142qw7au3hdufg.jpg?size_id=2) 0 0;
        padding: 0;
        margin: 0;
        position: absolute;
        top: 0px;
        left: 0px;
    }

HTML：

<div id="wrap">
<img class="allcategoriesBTN" src="http://www.mediafire.com/convkey/2a45/702142qw7au3hdufg.jpg?size_id=2">
<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>
<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>
</div>

Answer 3

抖动是我经常在Safari上处理的事情。对字体进行消除锯齿可以抑制抖动：

html {  
    -webkit-font-smoothing: antialiased;
}

CSS悬停在框上会产生文本抖动

3 个答案: