将悬停图像效果应用于div中的内嵌图像

Question

我在页面上放置了6个图像，每个图像都在内联显示的div类中。我还给每个图像一个ID。我想知道在悬停时让每个图像更改为不同图像的最佳方法。我想我可能违反了一些悬停或某种规则，或只是使用了错误的语法。欢迎所有的想法。

Answer 1

实际上最简单的方法就是忘记所有图像。将div设置为块并使每个div具有id：

<style>
 div {display: block; height: 100px; width: 100px; float: left;}
 #id {background: url("first_image_url.jpg");}
 #id:hover {background: url("second_image_url.jpg");}
</style>

这应该足以让你朝着一个方向前进。您可能还希望考虑使用JavaScript来执行翻转，但考虑到简单的后台切换实现，这通常被认为是过度的。