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