翻转图

Question

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

当蓝色翻过来时，蓝色箭头＆amp;文本将出现，部分模糊三角形的其他部分 - 如here所示。 同样，当绿色滚动时，绿色箭头和文字显示。 最后，当粉红色翻过来时，粉红色的箭头和文字显示。

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

谢谢！

Answer 1

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

#main div div {
    display: none;
}

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

请参阅this fiddle。