我的文字与代码中的框一起使用时出现问题。
这是演示: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"> </TD>
</TR>
<TR>
<TD width=100.5% height=92% class="botHalf"> </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/