javascript - 图像按钮在悬停时改变位置

<分区>

我以前看到过一个很好的效果，但现在我找不到任何相关信息。

这个概念是将一张图片与正常外观和悬停外观组合成一张图片。悬停时图像会移动并显示悬停外观。

这是一个可视化示例:

enter image description here

我很确定它涉及这种代码:

<img id="button" src="img.png" width="100" height="50">

onHover:
document.getElementById("button").top = "-50";

最佳答案

CSS:

#button {
    background-image:url('img.png');
    background-position: 0 0;
}

#button:hover {
    background-position: 0 -50px;
}

关于javascript - 图像按钮在悬停时改变位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12682779/