如何在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（）标签更改悬停时的图像。我不确定我是否会收到您的问题，因为我无法找到想要使您脱离的网站。