Html 不同的图像悬停在单个表格单元格上

是否有人可以建议一个代码来执行此操作，或者是否有另一个线程已经显示了该代码？我希望在下面做一些类似的事情，但不是使用文本/不透明度，而是使用另一个带有文本的图像：

或者我应该使用div而不是table

使用div和一点CSS:）

HTML:

编辑：

---

这里是JSFIDLE的一个版本：

从您的问题中我可以得到一点细节，您不应该使用表，因为它在语义上是不正确的。此外，div没有语义值。如果您正在显示一个人员列表，也许您可以使用一个包含“人员”类的列表

我会这样设置背景：

li {
  background: url('images/myimage.jpg');
}

然后，当用户像这样悬停时，我会更改它：

li:hover {
   background: url('images/myhoverimage.jpg);
}

---

谢谢各位。我需要浮动大约10个图像（连续5个），并将不同的鼠标悬停在它们上面，为陪审员命名。考虑到这一点，你能详细说明代码吗？使用bootstrap的网格系统：。对于不同的图像，请使用html和CSS中的其他类名。

li {
  background: url('images/myimage.jpg');
}

li:hover {
   background: url('images/myhoverimage.jpg);
}