不用JS实现显示隐藏效果（兼容各浏览器）

先上图，公司的机票软件项目中有很多显示隐藏效果，以前都用JS实现的，因为在IE6下：hover不起作用，但觉得太浪费资源

这次拿CSS实现了，且兼容各种浏览器

HTML:

<td width=”13%”><strong>￥1596</strong><br />
  <a href=”#”>税费<div>机建：￥50<br />燃油：￥50</div></a></td>

对应的CSS

.yutable a.gray:hover{ position:relative;}
.price{ display:none; }
.yutable a.gray:hover{position: relative;z-index: 1;border: none;}
.yutable a.gray:hover .price{ display:block;z-index:1000; position:absolute;border:1px solid #f60; color:#f60; top:-20px; right:-80px;_right:-45px; width:70px; height:40px; line-height:20px; text-decoration:none; background:#fff;}

CSS里针对IE6的定位写了个HACK。
画龙点睛：
IE6的bug就是如果a 与 a:hover 的css定义是一样的，也就是说如果a:hover 中没有样式的改变，hover就不会被触发。但如果在a:hover{}增加一些特定的属性，例如

a:hover{border:none;}
或者
a:hover{padding:0;}
又或者
a:hover{background: none;}

此时hover就可以触发了。这样的属性还包括direction/text-align/text-indent/float/overflow/position …… 等等。