写了一个css:
a.ShowImg{position:relative;}
a.ShowImg b{display:none;}
a.ShowImg:hover b
{
display:inline;
padding:2px 3px;
position:absolute;
top:15px;
width:120px;
background:#FDFBDF;
border:1px solid #000;
text-align:left;
line-height:14px;
color:#000000;
font-weight:normal;
} |
xhtml中如下：
提出的问题：
1、firefox下可以正常显示
2、IE7下也可以正常显示
3、IE6下无法显示
解决方案及原因：
解决：在CSS中加上一句：将background:#FDFBDF;加入到a.ShowImg:hover中.
即a.ShowImg:hover{background:#FDFBDF;}
原因：hover属性在CSS1标准中仅仅支持a标签，而在hover属性在css2标准中对大部分对象都支持。
这里使用一个background属性来消除伪类。
再用其他属性进行设置：例如width，positon，background，text-decoration等等,发现除了text-decoration，color，z-index不能触发显示外，其他属性均可以做为消除伪类:hover的特定属性。
于是最终样式如下：
|
a.ShowImg{position:relative;}
a.ShowImg b{display:none;}
a.ShowImg:hover b
{
display:inline;
padding:2px 3px;
position:absolute;
top:15px;
width:120px;
background:#FDFBDF;
border:1px solid #000;
text-align:left;
line-height:14px;
color:#000000;
font-weight:normal;
}
a.ShowImg:hover{background:#FDFBDF;} |