I am using a version of the CSS wizardry dropdowns with checkboxes in a sheet to attach one or more runes to abilities and trying to figure it out before I drop it into my sheet. I got it working with a single implementation, but when I put it in a repeating section it starts flickering. It needs to be in a repeating section because there will be multiple abilities and each could have multiple runes attached to it. I think what is going on is that the CSS can't distinguish between the html in the repeating fields and keeps trying to open and then close all of them, but I can't figure out what to do. Code follows, any help is appreciated <fieldset class="repeating_runes">
<div class="container">
<div class="child">
<input type="checkbox" name="attr_void" class="rune void" value="void" />
<span>&#x16F1;</span>
<input type="checkbox" name="attr_fehu" class="rune fehu" value="fehu" />
<span>&#x16A0;</span>
<input type="checkbox" name="attr_uruz" class="rune uruz" value="uruz" />
<span>&#x16A2;</span>
<input type="checkbox" name="attr_thurisaz" class="rune thurisaz" value="thurisaz" />
<span>&#x16A6;</span>
<input type="checkbox" name="attr_cansuz" class="rune cansuz" value="cansuz" />
<span>&#x16A8;</span>
<input type="checkbox" name="attr_raidho" class="rune raidho" value="raidho" />
<span>&#x16B1;</span>
<input type="checkbox" name="attr_kenaz" class="rune kenaz" value="kenaz" />
<span>&#x16B2;</span>
<input type="checkbox" name="attr_gebgift" class="rune gebgift" value="gebgift" />
<span>&#x16B7;</span>
<input type="checkbox" name="attr_wunjo" class="rune wunjo" value="wunjo" />
<span>&#x16B9;</span>
<input type="checkbox" name="attr_hagalaz" class="rune hagalaz" value="hagalaz" />
<span>&#x16BA;</span>
<input type="checkbox" name="attr_naudhneed" class="rune naudhneed" value="naudhneed" />
<span>&#x16BE;</span>
<input type="checkbox" name="attr_isaice" class="rune isaice" value="isaice" />
<span>&#x16C1;</span>
<input type="checkbox" name="attr_jethe" class="rune jethe" value="jethe" />
<span>&#x16C3;</span>
<input type="checkbox" name="attr_eihwas" class="rune eihwas" value="eihwas" />
<span>&#x16C7;</span>
<input type="checkbox" name="attr_pertho" class="rune pertho" value="pertho" />
<span>&#x16C8;</span>
<input type="checkbox" name="attr_elhaz" class="rune elhaz" value="elhaz" />
<span>&#x16C9;</span>
<input type="checkbox" name="attr_sowsun" class="rune sowsun" value="sowsun" />
<span>&#x16CA;</span>
<input type="checkbox" name="attr_tiwaz" class="rune tiwaz" value="tiwaz" />
<span>&#x16CF;</span>
<input type="checkbox" name="attr_berkano" class="rune berkano" value="berkano" />
<span>&#x16D2;</span>
<input type="checkbox" name="attr_ehwo" class="rune ehwo" value="ehwo" />
<span>&#x16D6;</span>
<input type="checkbox" name="attr_mann" class="rune mann" value="mann" />
<span>&#x16D7;</span>
<input type="checkbox" name="attr_claguz" class="rune claguz" value="claguz" />
<span>&#x16D9;</span>
<input type="checkbox" name="attr_dagaz" class="rune dagaz" value="dagaz" />
<span>&#x16DE;</span>
<input type="checkbox" name="attr_ing" class="rune ing" value="ing" />
<span>&#x16DD;</span>
<input type="checkbox" name="attr_othala" class="rune othala" value="othala" />
<span>&#x16DF;</span>
</div>
</div>
</fieldset> .sheet-container {
width: 100px;
}
.sheet-container,
.sheet-child {
display: inline-block;
}
.sheet-child {
vertical-align: middle;
width: 100px;
height: 100px;
}
.sheet-child input,
.sheet-child input + span {
display: none;
}
.sheet-child:hover {
background: LightGray;
position:absolute;
width: 100px;
height: auto;
z-index: 0;
padding: 0px;
}
/*.sheet-child:hover > div.sheet-void {
display: none;
}*/
.sheet-child:hover input,
.sheet-child:hover input + span {
display: inline;
}
.sheet-child:hover input + span {
margin-right: 5%
}
.sheet-child:hover span {
display: inline;
}
.sheet-child:not(:hover) input.sheet-rune.sheet-void:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-fehu:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-tiwaz:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-berkano:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-ehwo:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-mann:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-claguz:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-ing:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-dagaz:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-othala:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-hagalaz:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-naudhneed:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-isaice:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-jethe:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-eihwas:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-pertho:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-elhaz:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-sowsun:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-thurisaz:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-cansuz:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-raidho:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-kenaz:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-gebgift:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-wunjo:checked + span,
.sheet-child:not(:hover) input.sheet-rune.sheet-uruz:checked + span {
display: inline-block;
}
