8,960
edits
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* Основной стиль для <li> */ | /* Основной стиль для <li> */ | ||
. | .tooltip23-container { | ||
display: inline-block; | display: inline-block; | ||
position: relative; | position: relative; | ||
| Line 7: | Line 7: | ||
/* Скрытый по умолчанию всплывающий блок */ | /* Скрытый по умолчанию всплывающий блок */ | ||
. | .tooltip23-text { | ||
visibility: hidden; | visibility: hidden; | ||
width: 200px; | width: 200px; | ||
| Line 17: | 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 25: | Line 25: | ||
/* Треугольник-указатель всплывающего блока */ | /* Треугольник-указатель всплывающего блока */ | ||
. | .tooltip23-text::after { | ||
content: ""; | content: ""; | ||
position: absolute; | position: absolute; | ||
bottom: 100%; /* | bottom: 100%; /* Установлено вверху всплывающего блока */ | ||
left: 50%; | left: 50%; | ||
margin-left: -5px; | margin-left: -5px; | ||
| Line 37: | Line 37: | ||
/* Показывать всплывающий блок при наведении */ | /* Показывать всплывающий блок при наведении */ | ||
. | .tooltip23-container:hover .tooltip23-text { | ||
visibility: visible; | visibility: visible; | ||
opacity: 1; | opacity: 1; | ||
} | } | ||