Question

这很难解释，但我会尝试。我在CSS中有一个背景图像，然后我在它的顶部有一个表，它有一个白色背景。所以你无法在CSS中看到背景。

但我想要的效果是能够将鼠标悬停在圆形图像或形状上，然后在该小区域中显示背景。

一种可视化的方法，我在桌子上有一张照片，我在图像上放了一张纸，所以没有任何图像在视野中。我现在在纸上剪了一个洞，这样我就可以通过那个洞看到照片了。另外，当我看着不同的部分时，我将图纸移到变化背后的图像上。

任何想法都会很棒，但如果不可能的话，我会站在原地。

Answer 1

您可以将背景颜色放在单个表格单元格上，而不是在整个表格上放置背景颜色。

td, th { background:#fff; }

然后当您将鼠标悬停在表格单元格上时：

td:hover, th:hover { background:none; }

或者，如果你想显示更大的区域，你可以在一组单元格中添加一个类，然后按照上面相同的方式关闭所有具有特定类的单元格集群的背景：

td.my-class-name:hover, th.my-class-name:hover { background:none; }

显然，这不是圆形形状，但无论如何都是可能的解决方案。

Answer 2

您可以在悬停时将其中一个表格单元格的背景颜色设置为transparent。虽然为了完成这项工作，您应该在td上设置白色背景，而不是table，如下所示：

td {
    background-color:white;
}

td:hover {
    background-color: transparent;
}