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