如何使图像在 CSS/HTML 中的鼠标悬停时自动移动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8325704/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make images move automatically + on mouseover in CSS/HTML?
提问by Saiful Islam
How to make images move automatically + on mouseover in CSS/HTML?
如何使图像在 CSS/HTML 中的鼠标悬停时自动移动？
For example Ek Main Aur Ekk Tu Movie Site
回答by Kyle
It's actually really easy to do with CSS3:
使用 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;
}
This tells the element onHover to transition between the two states of topover a period of 2 seconds and 0.3 seconds when the mouse leaves.
这告诉元素 onHovertop在鼠标离开时在 2 秒和 0.3 秒的两个状态之间转换。
Check it out here: http://jsfiddle.net/HGjQC/'
在这里查看：http: //jsfiddle.net/HGjQC/'
As this is a CSS3 technique, the code here will only work in webkit browsers (Chrome, Safari, any other browser using the Chromium engine [Rockmelt]), Opera and Mozilla browsers.
由于这是一种 CSS3 技术，此处的代码仅适用于 webkit 浏览器（Chrome、Safari、任何其他使用 Chromium 引擎 [Rockmelt] 的浏览器）、Opera 和 Mozilla 浏览器。
For IE, yoy'll probably need to use Javascript for now until MS decides to implement more CSS3.
对于 IE，您可能需要暂时使用 Javascript，直到 MS 决定实施更多 CSS3。
回答by Leandro Galluppi
回答by Emilio
you could make an invisible div, and then use the query .attr() tag to change the image on hover. I'm not sure I get your question though, because I couldn't find the site that wanted to base yours off of.
您可以创建一个不可见的 div，然后使用查询 .attr() 标记更改悬停时的图像。不过，我不确定我是否明白您的问题，因为我找不到想要将您的问题作为基础的网站。
回答by Laszlo
Maybe you can use JavaScript, like this: http://jsfiddle.net/HGjQC/2/
也许你可以使用 JavaScript，像这样：http: //jsfiddle.net/HGjQC/2/
