对 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 来执行翻转，但考虑到简单的后台切换实现，通常这被认为是过度杀伤力。