悬停和旧/新浏览器

Question

我使用精灵般的技术制作了翻转效果

<a href="#">
<img width="240" height="160" src="240x160.jpg" class="…wp-post-image" alt="287" title="287" />
</a>


a{
  display:block;
  overflow: hidden;
  width:120px;
  height: 160px;
}

a:hover img{
  margin-left: -120px;
}

这是工作，但是它更好（在xhtml 1 stric或html5中）？

 a img:hover{
    margin-left: -120px;
 }

Answer 1

最好使用background-image属性而不是实际图像来避免浏览器问题。

a{
    display:block;
    overflow:hidden;
    width:120px;
    height:160px;
    background:url(240x160.jpg) no-repeat 0 0;
}
a:hover{
    background-position:-120px 0;
}