懸停和新/舊的瀏覽器

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