css-sprites - 带翻转的图表

Question

我正在使用 WordPress 构建一个响应式站点，我需要制作一个带有 3 个热点的交互式图表：三角形角上的 3 个图标中的每一个都是一个不同的热点......

当蓝色翻过来时，会出现蓝色箭头和文字，部分遮挡三角形的其他部分 - 如此处所示。同样，当果岭翻滚时，会显示绿色箭头和文字。最后，当粉红色滚动时，会显示粉红色箭头和文本。

我以前从未尝试过 CSS 精灵，但我知道它们比旧的 javascript onMouseOut / onMouseOver 方法更好。谁能告诉我如何最好地制作这个交互式图表？我在编码方面不是很老练。任何帮助将不胜感激。

谢谢！

Answer 1

使用 CSS，您可以使用:hover伪类在翻转时显示某些内容 - 无需 JS！

#main div div {
    display: none;
}

#main div:hover div {
    display: block;
}

看到这个小提琴。