我想做图片中显示的效果
我写的代码如下:.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下无法显示
请问如何解决此问题。谢谢
其它的都不支持,,
所以考虑建议在外面加a标签, 或者用JS
试着弄下,将这里定义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");
}
);
});
});