沙盒/悬浮窗:修订间差异
更新日期: 2024-07-10 最新编辑:Kumo67
无编辑摘要 |
无编辑摘要 |
||
(未显示同一用户的2个中间版本) | |||
第1行: | 第1行: | ||
<div class=" | <div class="tooltip">悬停我查看图片 | ||
<span class="tooltiptext"> | |||
[[文件:MTenne05-卡面.webp|无]] | |||
</span> | |||
</div> | </div> | ||
<video autoplay loop muted src='MTenne05-视频.webm' type="video/webm" /> | |||
{{#CSS: | {{#CSS: | ||
. | /* Tooltip 容器 */ | ||
.tooltip { | |||
position: relative; | position: relative; | ||
display: inline-block; | |||
border-bottom: 1px dotted black; /* 可选:提供一个视觉提示 */ | |||
} | } | ||
. | /* 隐藏的 Tooltip 内容 */ | ||
.tooltiptext { | |||
visibility: hidden; | |||
width: 120px; | |||
background-color: black; | |||
color: #fff; | |||
text-align: center; | |||
border-radius: 6px; | |||
padding: 5px 0; | |||
/* 位置 */ | |||
position: absolute; | position: absolute; | ||
z-index: 1; | |||
top: 100%; | |||
left: 50%; | |||
margin-left: -60px; | |||
/* 过渡效果 */ | |||
opacity: 0; | |||
transition: opacity 0.6s; | |||
} | } | ||
. | .tooltip:hover .tooltiptext { | ||
visibility: visible; | |||
opacity: 1; | |||
} | } | ||
}} | }} |