<details open id="root">
<summary class="balloon r4 c5">🎈</summary>
<button class="balloon r2 c2" popovertarget="pop1" popovertargetaction="show">🎈</button>
<details open>
<summary class="balloon r6 c6">🎈</summary>
<button class="balloon r1 c4" popovertarget="pop5" popovertargetaction="show">🎈</button>
</details>
<button class="balloon r1 c5" popovertarget="pop3" popovertargetaction="show">🎈</button>
<details open>
<summary class="balloon r2 c6">🎈</summary>
<button class="balloon r7 c3" popovertarget="pop4" popovertargetaction="show">🎈</button>
<button class="balloon r3 c4" popovertarget="pop1" popovertargetaction="hide">🎈</button>
</details>
<details open>
<summary class="balloon r4 c6">🎈</summary>
<button class="balloon r3 c7" popovertarget="pop2" popovertargetaction="show">🎈</button>
<details open>
<summary class="balloon r2 c3">🎈</summary>
<button class="balloon r6 c1" popovertarget="pop1" popovertargetaction="show">🎈</button>
</details>
<button class="balloon r5 c4" popovertarget="pop4" popovertargetaction="show">🎈</button>
<details open>
<summary class="balloon r7 c7">🎈</summary>
<button class="balloon r5 c2" popovertarget="pop1" popovertargetaction="show">🎈</button>
<button class="balloon r3 c1" popovertarget="pop2" popovertargetaction="hide">🎈</button>
</details>
</details>
</details>
<div id="pop1" popover="manual">
<button class="balloon r4 c2" popovertarget="pop1" popovertargetaction="hide">🎈</button>
</div>
<div id="pop2" popover="manual">
<button class="balloon r3 c3" popovertarget="pop2" popovertargetaction="hide">🎈</button>
<button class="balloon r1 c1" popovertarget="pop4" popovertargetaction="hide">🎈</button>
</div>
<div id="pop3" popover="manual">
<button class="balloon r5 c5" popovertarget="pop4" popovertargetaction="hide">🎈</button>
<button class="balloon r6 c2" popovertarget="pop3" popovertargetaction="hide">🎈</button>
</div>
<div id="pop4" popover="manual">
<button class="balloon r7 c2" popovertarget="pop4" popovertargetaction="hide">🎈</button>
<button class="balloon r6 c5" popovertarget="pop2" popovertargetaction="hide">🎈</button>
</div>
<div id="pop5" popover="manual">
<button class="balloon r4 c7" popovertarget="pop4" popovertargetaction="hide">🎈</button>
<button class="balloon r5 c3" popovertarget="pop5" popovertargetaction="hide">🎈</button>
</div>
body {
margin: 0;
background-color: lightskyblue;
}
details,
div {
inset: unset;
overflow: visible;
border: none;
background-color: transparent;
padding: 0;
}
.r1 {
--row: 1;
}
.r2 {
--row: 2;
}
.r3 {
--row: 3;
}
.r4 {
--row: 4;
}
.r5 {
--row: 5;
}
.r6 {
--row: 6;
}
.r7 {
--row: 7;
}
.c1 {
--col: 1;
}
.c2 {
--col: 2;
}
.c3 {
--col: 3;
}
.c4 {
--col: 4;
}
.c5 {
--col: 5;
}
.c6 {
--col: 6;
}
.c7 {
--col: 7;
}
.balloon {
position: absolute;
display: block;
font-size: 4em;
border: none;
background-color: transparent;
padding: 0;
margin: 0;
height: 1em;
width: 1em;
top: calc(12.5vh * (var(--row) + 1) - 12.5vh);
left: calc(12.5vw * (var(--col) + 1) - 12.5vw);
list-style-type: none;
cursor: pointer;
text-align: center;
user-select: none;
scale: 1;
}
.balloon:active {
scale: 0.7;
transition: 0.5s;
}
details summary::-webkit-details-marker {
display: none;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.