Верстка кругового меню на чистом css. Как реализовать?

Question

[Андрей]

Подскажите варианты реализации.
Был как-то такой запрос:
"Сделать интерактивный прайс (круг разбитый на 6 секторов по 10 минут) - при наведении на сектор подсвечивается сам сектор и все предыдущие, начиная с условных 12 часов. То есть при наведении на сектор "50 мин" подсвечиваются сектора от 10 до 50 мин включительно. Одновременно с этим меняется текст в блоке сбоку.

Долго копался и удалось сделать только так jsfiddle.net/LMPcB/236
Всё вроде хорошо (хотя и не совсем по заданию), но немного раздражает один нюанс - ссылки это якоря, и при нажатии страница скроллится на место вывода значения якоря.

Можно ли сделать как-то иначе? Вопрос больше для интереса, может кто-то сталкивался.

Answer 1

[ummahusla]

На нативном не получится, но с помощью пары строк JS вы можете, отключить тот самый "скроллинг":

$(".class a").click(function(event) {
  event.preventDefault();
});

Comments

[Андрей]

Попробовал, никакого эффекта. Можете проверить по указанной ссылке?