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

2024年7月10日 (三) 18:01的版本

悬停我查看图片

@@ 第1行： / 第1行： @@
-<div class="hover-target">[[文件:MTenne05-卡面.webp|无]]
-     <div class="tooltip">{{#ifexist: File:MTenne05-视频.webm | <video autoplay loop muted src='MTenne05-视频.webm' type="video/webm" /> |  }}</div>
+<div class="tooltip">悬停我查看图片
+    <span class="tooltiptext">
+        [[文件:MTenne05-卡面.webp|无]]
+     </span>
 </div>
-<div class="user-hover-target">[[文件:MTenne05-卡面.webp|无]]</div>
-<div id="user-tooltip" style="display: none;">{{#ifexist: File:MTenne05-视频.webm | <video autoplay loop muted src='MTenne05-视频.webm' type="video/webm" /> |  }}</div>
-<div class="user-hover-target">悬停我试试</div>
-<div id="user-tooltip" style="display: none;">我是悬浮元素！</div>
 <video autoplay loop muted src='MTenne05-视频.webm' type="video/webm" />
 {{#CSS:
-.hover-target {
+/* Tooltip 容器 */
+.tooltip {
      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;
-     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;
-#user-tooltip {
-    background-color: black;
-    color: white;
-    padding: 5px 10px;
-     z-index: 1000; /* 确保在顶部 */
 }
 }}