User:Tsutomu25/sandbox/Cover2: Difference between revisions
Created page with "<includeonly><span class="cover">{{{1}}}</span></includeonly> {{code |css= .cover, .cover a, a .cover, .cover a.new { background-color: #e6e6e6; color: #e6e6e6; text-sh..." |
No edit summary |
||
| Line 1: | Line 1: | ||
<includeonly><span class=" | <includeonly><span id="spoiler-box"><a href="#spoiler-target" id="show-button" class="button"></a><a href="#" id="hide-button" class="button"></a><div id="spoiler-target"></div><span id="spoiler-text">{{{1}}}</span></span> | ||
{{code | {{code | ||
|css= | |||
/* Styles for the spoiler box */ | |||
#spoiler-box{ | |||
display: inline-block; | |||
position: relative; | |||
background-color: #909199; | |||
transition: 0.3s; | |||
} | |||
/* Styles for the buttons */ | |||
. | .button{ | ||
position: absolute; | |||
top: 0px; | |||
left: 0px; | |||
width: 100%; | |||
height: 100%; | |||
} | |||
#show-button{ | |||
display: inline-block; | |||
z-index: 5; | |||
} | |||
#hide-button{ | |||
display: none; | |||
z-index: 0; | |||
} | |||
/* Hiding the target div */ | |||
#spoiler-target{ | |||
display: none; | |||
} | |||
/* Styles to hide the spoiler text */ | |||
#spoiler-text{ | |||
opacity: 0; | |||
transition: 0.3s; | |||
-webkit-user-select: none; /* Safari */ | |||
-ms-user-select: none; /* IE 10 and IE 11 */ | |||
user-select: none; /* Standard syntax */ | |||
} | |||
/* Styles to reveal the spoiler text */ | |||
#spoiler-box:has(#spoiler-target:target){ | |||
background-color: #e3e3e5; | |||
} | } | ||
#spoiler-target:target ~ #spoiler-text{ | |||
opacity: 1; | |||
background-color: #e3e3e5; | |||
-webkit-user-select: text; | |||
-ms-user-select: text; | |||
user-select: text; | |||
} | } | ||
/* Styles to hide the show button and reveal the hide button */ | |||
#spoiler-box:has(#spoiler-target:target) #show-button{ | |||
display: none; | |||
z-index: 0; | |||
} | } | ||
#spoiler-box:has(#spoiler-target:target) #hide-button{ | |||
display: inline-block; | |||
z-index: 5; | |||
} | } | ||
}}<noinclude> | }}</includeonly> | ||
<noinclude> | |||
<pre>{{User:Tsutomu25/sandbox/Cover2|The culprit is Gosho Aoyama}}</pre> | <pre>{{User:Tsutomu25/sandbox/Cover2|The culprit is Gosho Aoyama}}</pre> | ||
Revision as of 10:22, 21 August 2025
{{User:Tsutomu25/sandbox/Cover2|The culprit is Gosho Aoyama}}Results in
<a href="#spoiler-target" id="show-button" class="button"></a><a href="#" id="hide-button" class="button"></a>The culprit is Gosho Aoyama
Results in
<a href="#spoiler-target" id="show-button" class="button"></a><a href="#" id="hide-button" class="button"></a>The culprit is Gosho Aoyama
Results in
<a href="#spoiler-target" id="show-button" class="button"></a><a href="#" id="hide-button" class="button"></a>The culprit is Gosho Aoyama