8,960
edits
No edit summary |
No edit summary |
||
| Line 10: | Line 10: | ||
#f44336 75% 100% | #f44336 75% 100% | ||
); | ); | ||
transition: background 0.3s ease; /* Добавлено для плавного перехода */ | |||
} | |||
.ring-chart27:hover { | |||
filter: brightness(1.1); /* Подсветка при наведении */ | |||
} | } | ||
| Line 41: | Line 46: | ||
text-align: center; | text-align: center; | ||
font-size: 14px; | font-size: 14px; | ||
cursor: pointer; /* Указатель на элемент */ | |||
} | } | ||
.ring-chart27 ul li:nth-child(1) { top: 5%; left: 50%; transform: translateX(-50%); } | .ring-chart27 ul li:nth-child(1) { | ||
.ring-chart27 ul li:nth-child(2) { top: 50%; right: 5%; transform: translateY(-50%); } | top: 5%; left: 50%; transform: translateX(-50%); | ||
.ring-chart27 ul li:nth-child(3) { bottom: 5%; left: 50%; transform: translateX(-50%); } | background: #4caf50; /* Добавлено фоновое цвет для первого сегмента */ | ||
.ring-chart27 ul li:nth-child(4) { top: 50%; left: 5%; transform: translateY(-50%); } | border-radius: 50%; /* Округление для эффекта подсветки */ | ||
transition: background 0.3s ease; /* Плавный переход */ | |||
} | |||
.ring-chart27 ul li:nth-child(1):hover { | |||
background: #66bb6a; /* Цвет подсветки для первого сегмента */ | |||
} | |||
.ring-chart27 ul li:nth-child(2) { | |||
top: 50%; right: 5%; transform: translateY(-50%); | |||
background: #ff9800; /* Цвет для второго сегмента */ | |||
border-radius: 50%; | |||
transition: background 0.3s ease; | |||
} | |||
.ring-chart27 ul li:nth-child(2):hover { | |||
background: #ffb74d; /* Цвет подсветки для второго сегмента */ | |||
} | |||
.ring-chart27 ul li:nth-child(3) { | |||
bottom: 5%; left: 50%; transform: translateX(-50%); | |||
background: #2196f3; /* Цвет для третьего сегмента */ | |||
border-radius: 50%; | |||
transition: background 0.3s ease; | |||
} | |||
.ring-chart27 ul li:nth-child(3):hover { | |||
background: #64b5f6; /* Цвет подсветки для третьего сегмента */ | |||
} | |||
.ring-chart27 ul li:nth-child(4) { | |||
top: 50%; left: 5%; transform: translateY(-50%); | |||
background: #f44336; /* Цвет для четвертого сегмента */ | |||
border-radius: 50%; | |||
transition: background 0.3s ease; | |||
} | |||
.ring-chart27 ul li:nth-child(4):hover { | |||
background: #ef5350; /* Цвет подсветки для четвертого сегмента */ | |||
} | |||