我已经尝试了一切,但我无法让这个覆盖在 Chrome 或 Safari 中工作......有什么想法吗?箭头应该像在 Firefox 和 IE 中一样在拇指上方。
在 Chrome 中:
在火狐中:
我的代码:
.hm_tst_dv_img {
height: 80px;
width: 131px;
display: block;
float: left;
margin: 0 3px 20px 0;
position: relative;
overflow: hidden;
}
.hm_tst_dv_img_thumb {
height: 80px;
width: 131px;
display: block;
float: left;
clear: both;
position: relative;
top: 0;
z-index: 90;
}
.hm_tst_dv_img_overlay {
height: 80px;
width: 131px;
display: block;
float: left;
margin: 0;
position: relative;
top: -80px;
z-index: 100;
}
<div class="hm_tst_dv_img">
<div class="hm_tst_dv_img_thumb">
<img alt="" src="<?php echo base_url(); ?>
uploads/testimonials/thumb_
<?php echo $testimonial->image; ?>"
width="131" height="80" />
</div>
<div class="hm_tst_dv_img_overlay">
<a href="javascript:void(0);" onclick="PlayTestmoinalVideo(<?=$i;?>)">
<img src="<?php echo base_url(); ?>images/testimonial_overlay.png" />
</a>
</div>
</div>