8,960
edits
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* Основной стиль для <li> */ | /* Основной стиль для <li> */ | ||
. | .tooltip-container { | ||
display: inline-block; | display: inline-block; | ||
position: relative; | position: relative; | ||
| Line 12: | Line 7: | ||
/* Скрытый по умолчанию всплывающий блок */ | /* Скрытый по умолчанию всплывающий блок */ | ||
. | .tooltip-text { | ||
visibility: hidden; | visibility: hidden; | ||
width: 200px; | width: 200px; | ||
| Line 22: | Line 17: | ||
position: absolute; | position: absolute; | ||
z-index: 1; | z-index: 1; | ||
top: 125%; /* Позиция всплывающего блока | top: 125%; /* Позиция всплывающего блока сверху */ | ||
left: 50%; | left: 50%; | ||
margin-left: -100px; /* Сдвиг всплывающего блока влево на половину его ширины */ | margin-left: -100px; /* Сдвиг всплывающего блока влево на половину его ширины */ | ||
| Line 30: | Line 25: | ||
/* Треугольник-указатель всплывающего блока */ | /* Треугольник-указатель всплывающего блока */ | ||
. | .tooltip-text::after { | ||
content: ""; | content: ""; | ||
position: absolute; | position: absolute; | ||
| Line 38: | Line 33: | ||
border-width: 5px; | border-width: 5px; | ||
border-style: solid; | border-style: solid; | ||
border-color: transparent transparent #555 transparent; | border-color: transparent transparent #555 transparent; /* Изменён порядок цвета */ | ||
} | } | ||
/* Показывать всплывающий блок при | /* Показывать всплывающий блок при наведении */ | ||
. | .tooltip-container:hover .tooltip-text { | ||
visibility: visible; | visibility: visible; | ||
opacity: 1; | opacity: 1; | ||