hover - 悬停和旧/新浏览器

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;
}