如何在CSS/HTML中的鼠標懸停時自動移動圖像？

Question

如何使圖像自動移動+對CSS/HTML鼠標懸停？

例如Ek Main Aur Ekk Tu Movie Site

Answer 1

它其實很容易用CSS3做：

.moveMe 
{ 
    width: 150px; 
    height: 40px; 
    background: #f01; 
    position: absolute; 
    top: 0; 
    -webkit-transition: top 2s; 
    -moz-transition: top 2s; 
    -o-transition: top 2s; 
} 

.moveMe:hover 
{ 
    top: 10px; 
    -webkit-transition: top 0.3s; 
    -moz-transition: top 0.3s; 
    -o-transition: top 0.3s; 
} 

這一段2秒和0.3秒的時候告訴元素onHover選項來的top兩種狀態之間的轉換鼠標離開。

看看這裏：http://jsfiddle.net/HGjQC/'

由於這是一個CSS3技術，代碼在這裏將只在WebKit的瀏覽器（Chrome瀏覽器，Safari瀏覽器，使用鉻引擎的任何其他瀏覽器[器RockMelt]），Opera和工作Mozilla瀏覽器。

對於IE，yoy'll可能需要使用JavaScript即日起至MS決定實施更多的CSS3。

Answer 2

也許你可以使用JavaScript，像這樣： http://jsfiddle.net/HGjQC/2/

Answer 3

它使用一種叫做視差效果。我發現了一個jquery插件，似乎有助於做這種效果。該插件名爲Plax，這裏是demo

Answer 4

您可以製作一個不可見的div，然後使用查詢.attr（）標籤更改懸停時的圖像。我不確定我是否會收到您的問題，因爲我無法找到想要使您脫離的網站。