关于ie6:hover的问题

Question

我想做图片中显示的效果
我写的代码如下：.img1{width:38px; height:39px; padding:2px 3px; display:block; cursor:pointer; float:left; position:relative}
.img1 p{display:none; position:absolute;  bottom:47px; left:-100px; padding:5px; color:#FFF; text-align:left}
.img1:hover p{width:125px; background:#422d2c url(../images/pop_02.gif) repeat-x top; border:1px solid #472025; line-height:18px; z-index:5; display:block}
.img1:hover p span{width:7px; height:8px;background:url(../images/pop_01.gif) no-repeat; position:absolute; right:5px; bottom:-8px}
<div class="img1">
       <div><img src="temp/avatar.jpg" width="38" height="39" /></div>
       <p><span></span>文字文字文字文字文字文字文字文字文字文字文字文字</p>
   </div>
        <div class="img1">
       <div><img src="temp/avatar.jpg" width="38" height="39" /></div>
       <p><span></span>123</p>
   </div>
        <div class="img1">
       <div><img src="temp/avatar.jpg" width="38" height="39" /></div>
       <p><span></span>123</p>
   </div>
        <div class="img1">
       <div><img src="temp/avatar.jpg" width="38" height="39" /></div>
       <p><span></span>123</p>
   </div>可是经测试，发现此效果在ie6下无法显示
请问如何解决此问题。谢谢

Answer 1

ie6下只支持 A:hover的伪类,
其它的都不支持,,
所以考虑建议在外面加a标签, 或者用JS

Answer 2

IE6只支持a标签的:hover伪类，解决方法一般用JS，还可以写HTC文件

Answer 3

我在网上查js，都是在标签中加入一个鼠标事件，但这样只能一张背景图。那么像我这种情况，有没有什么js可以呢？

Answer 4

尝试用dom创建表格，可是不知道中间的活字该怎么处理，愁，请教大大们

Answer 5

不知道你想做的效果是啥样的，
试着弄下，将这里定义class，.img1_hover_p{width:125px; background:#422d2c url(../images/pop_02.gif) repeat-x top; border:1px solid #472025; line-height:18px; z-index:5; display:block}
.img1_hover_p_span{width:7px; height:8px;background:url(../images/pop_01.gif) no-repeat; position:absolute; right:5px; bottom:-8px}
我用JQuery, $(function(){
 $.each($(".img1 hover p"), function(){
    $(this).hover(function(){
        $(this).addClass("img1_hover_p");
    },
        function(){
           $(this).removeClass("img1_hover_p");
        }
    );
 }); $.each($(".img1 hover p span"), function(){
    $(this).hover(function(){
        $(this).addClass("img1_hover_p_span");
    },
        function(){
           $(this).removeClass("img1_hover_p_span");
        }
    );
 });
});