Difference between revisions of "User:BOBO/Sandbox"

From Detective Conan Wiki
(Template:Css test)
 
(3 intermediate revisions by the same user not shown)
Line 2: Line 2:
 
__NOTOC__
 
__NOTOC__
 
=Template:Css test=
 
=Template:Css test=
<span class="cover">Hidden text</span>
+
<span class="tooltip">Hover over me<span class="tooltiptext">Tooltip text</span></span>
 
{{css|
 
{{css|
.cover, .cover a, a .cover, .cover a.new {
+
.tooltip {
   background-color: #252525;
+
   position: relative;
   color: #252525;
+
   display: inline-block;
   text-shadow: none;
+
   border-bottom: 1px dotted black;
 
}
 
}
.cover:hover, .cover:active,
+
 
.cover:hover .cover, .cover:active .cover {
+
.tooltip .tooltiptext {
   color: white !important;
+
  visibility: hidden;
 +
  opacity: 0;
 +
  transition: opacity 0.2s;
 +
  max-width: 320px;
 +
  width: max-content;          /* shrink-wrap text width */
 +
  background-color: white;
 +
  color: black;
 +
  text-align: left;
 +
  border-radius: 3px;
 +
  padding: 6px 10px;
 +
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
 +
  border: 1px solid #ccc;
 +
 
 +
  position: absolute;
 +
  z-index: 1;
 +
  bottom: 100%;
 +
  left: 50%;
 +
   transform: translateX(-50%);
 +
 
 +
  white-space: nowrap;          /* prevent text wrapping */
 +
  overflow-x: auto;             /* enable horizontal scroll if text too long */
 
}
 
}
.cover:hover a, a:hover .cover,
+
 
.cover:active a, a:active .cover {
+
.tooltip:hover .tooltiptext,
   color: lightblue !important;
+
.tooltip .tooltiptext:hover {
}
+
   visibility: visible;
.cover:hover .new, .cover .new:hover, .new:hover .cover,
+
   opacity: 1;
.cover:active .new, .cover .new:active, .new:active .cover {
 
   color: #BA0000 !important;
 
 
}
 
}
 
}}
 
}}

Latest revision as of 17:04, 1 June 2025

Template:Css test

Hover over meTooltip text Template:Css

Anime production staff

Screenplay


Organizer


Storyboard


Episode Director