Диаграмма с ролловерами

Question

Я создаю адаптивный сайт с помощью WordPress, и мне нужно сделать интерактивную диаграмму с 3 точками доступа: каждая из 3 иконок в углах треугольника здесь будет иметь свою точку доступа...

Когда синий цвет перевернется, появятся синие стрелки и текст, частично затеняя другие части треугольника - как видно здесь. Аналогично, когда зеленый цвет перевернут, отображаются зеленые стрелки и текст. И наконец, когда розовый цвет перевернут, отображаются розовые стрелки и текст.

Я никогда раньше не пробовал CSS-спрайты, но я понимаю, что они лучше, чем старый метод javascript onMouseOut / onMouseOver. Кто-нибудь может посоветовать, пожалуйста, как мне лучше сделать эту интерактивную диаграмму? Я не очень опытен в кодировании. Будем очень благодарны любой помощи.

Спасибо!

Answer 1

С помощью CSS вы можете использовать :hover псевдокласс для отображения чего-либо на ролловере - JS не нужен!

#main div div {
    display: none;
}

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

Смотри эту скрипку.