兼容IE6的jquery+css3实现图片提示

新建html文档。

书写hmtl代码。

书写css代码。* { margin: 0; padding: 0; list-style-type: none; }a, img { border: 0; }a { color: #333; text-decoration: none; }body { font: 12px/180% Arial, Helvetica, sans-serif, '宋体'; }.case { width: 400px; margin: 80px auto 0 auto; border: solid 1px #ddd; padding: 10px; border-radius: 10px; }.case li { display: block; height: 32px; line-height: 32px; padding-left: 18px; position: relative; background: url(../images/greenarrowright.gif) no-repeat -5px center; border-radius: 0px; }.case li.lihover { background: url(../images/greenarrowright.gif) no-repeat 10px center #F1F1F1; border-radius: 10px; }.case .tips { position: absolute; top: -53px; left: 300px; width: 182px; height: 123px; visibility: hidden; background: url(../images/tipbg.png) no-repeat; opacity: 0.0; }.case .tips .tipscont { width: 100px; text-align: center; margin: 10px 0 0 50px; }.case .hover { visibility: visible; top: -93px; left: 320px; opacity: 1; }

代码整体结构。

查看效果。