沙盒/悬浮窗:修订间差异

更新日期: 2024-07-10  最新编辑:Kumo67

(创建页面,内容为“<div class="hover-target">悬停我试试 <div class="tooltip">我是悬浮元素!</div> </div> {{#CSS: .hover-target { position: relative; cursor: pointer; } .tooltip { position: absolute; top: 20px; →‎距离触发元素的位置,可调整:​ left: 0; background-color: black; color: white; padding: 5px 10px; display: none; →‎默认不显示:​ z-index: 1000; →‎确保在顶部:​ } .hover-target:hover .toolt…”
 
无编辑摘要
 
(未显示同一用户的5个中间版本)
第1行: 第1行:
<div class="hover-target">悬停我试试
<div class="tooltip">悬停我查看图片
     <div class="tooltip">我是悬浮元素!</div>
     <span class="tooltiptext">
        [[文件:MTenne05-卡面.webp|无]]
    </span>
</div>
</div>
<video autoplay loop muted src='MTenne05-视频.webm' type="video/webm" />


{{#CSS:
{{#CSS:
.hover-target {
/* Tooltip 容器 */
.tooltip {
     position: relative;
     position: relative;
     cursor: pointer;
     display: inline-block;
    border-bottom: 1px dotted black; /* 可选:提供一个视觉提示 */
}
}


.tooltip {
/* 隐藏的 Tooltip 内容 */
.tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
 
    /* 位置 */
     position: absolute;
     position: absolute;
     top: 20px; /* 距离触发元素的位置,可调整 */
     z-index: 1;
     left: 0;
     top: 100%;
     background-color: black;
     left: 50%;
     color: white;
     margin-left: -60px;
    padding: 5px 10px;
 
     display: none; /* 默认不显示 */
     /* 过渡效果 */
     z-index: 1000; /* 确保在顶部 */
     opacity: 0;
    transition: opacity 0.6s;
}
}


.hover-target:hover .tooltip {
.tooltip:hover .tooltiptext {
     display: block;
     visibility: visible;
    opacity: 1;
}
}


}}
}}

2024年7月10日 (三) 18:02的最新版本

悬停我查看图片
   
MTenne05-卡面.webp