如何使图像在 CSS/HTML 中的鼠标悬停时自动移动？

Question

如何使图像在 CSS/HTML 中的鼠标悬停时自动移动？

例如Ek Main Aur Ekk Tu 电影网站

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

这告诉元素 onHovertop在鼠标离开时在 2 秒和 0.3 秒的两个状态之间转换。

在这里查看：http : //jsfiddle.net/HGjQC/ '

由于这是一种 CSS3 技术，此处的代码仅适用于 webkit 浏览器（Chrome、Safari、任何其他使用 Chromium 引擎 [Rockmelt] 的浏览器）、Opera 和 Mozilla 浏览器。

对于 IE，您可能需要暂时使用 Javascript，直到 MS 决定实施更多 CSS3。