css - 对 div 内的内联图像应用悬停图像效果

Question

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

Answer 1

实际上，最简单的方法是将图像全部忘记。将您的 div 设置为一个 block ，并让每个 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 来执行翻转，但通常考虑到简单的后台切换实现，这被认为是多余的。