菜单使用瓷砖和纯CSS的子图

Question

我尝试使用纯CSS的瓷砖和子图制作菜单。 单击其中一个颜色的其中一个贴图时，所有其他贴图都将消失，并且只会显示该颜色的子贴图。 我面对的问题是，只有瓷砖在该瓷砖之后消失。 瓷砖在该瓷砖之前不在。 图片描述了实验。 检查代码片段。 由于事先 干杯 克里斯

#reset + label { display: block; } 
 

 
label { display: none } 
 
input[type="radio"] { display: none; } 
 
div { display: none; } 
 

 
input[type="radio"]:checked + label ~ label, 
 
input[type="radio"]:checked + label ~ label ~ div { display: none; } 
 

 
input[type="radio"]:checked + label ~ div { display: block; } 
 

 
input[type="radio"][id="reset"]:checked ~ label { display: block; } 
 

 
div { 
 
    transition:all 1s; 
 
} 
 
label { 
 
    width:23%; 
 
    float:left; 
 
    text-align:center; 
 
    background:#ffffff; 
 
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
 
    color:#222222; 
 
    padding:0.5%; 
 
    margin:0.5%; 
 
    margin-bottom:30px; 
 
    cursor:pointer; 
 
    opacity: 1; 
 
    transition:all 1s; 
 
} 
 
.tile, .sub-tile { 
 
    width:23%; 
 
    height:100px; 
 
    float:left; 
 
    transition:all 1s; 
 
    margin:0.5%; 
 
    padding:0.5%; 
 
} 
 

 
.green, .top-green{ 
 
    background:#66dd99; 
 
} 
 
.blue, .top-blue { 
 
    background:#6666ff; 
 
} 
 
.red, .top-red { 
 
    background:#ff4466; 
 
} 
 
.purple, .top-purple { 
 
    background:purple; 
 
}

<input type="radio" name="color" class="reset" checked id="reset" /> 
 
    <label for="reset">Reset</label> 
 

 
    <input type="radio" id="blue" class="blue" name="color" /> 
 
     <label for="blue" class="tile top-blue">BLUE</label> 
 
     <div class="sub-tile blue">1</div> 
 
     <div class="sub-tile blue">2</div> 
 
     <div class="sub-tile blue">3</div> 
 
     <div class="sub-tile blue">4</div> 
 
     <div class="sub-tile blue">5</div> 
 
     <div class="sub-tile blue">6</div> 
 

 

 
     <input type="radio" id="red" class="red" name="color"/> 
 
     <label for="red" class="tile top-red">RED</label> 
 

 
     <div class="sub-tile red">7</div> 
 
     <div class="sub-tile red">8</div> 
 
     <div class="sub-tile red">9</div> 
 
     <div class="sub-tile red">10</div> 
 

 
     <input type="radio" id="purple" class="purple" name="color"/> 
 
     <label for="purple" class="tile top-purple">PURPLE</label> 
 

 
     <div class="sub-tile purple">16</div> 
 
     <div class="sub-tile purple">17</div> 
 
     <div class="sub-tile purple">18</div> 
 
     <div class="sub-tile purple">19</div> 
 
     <div class="sub-tile purple">20</div> 
 
     <div class="sub-tile purple">21</div> 
 

 
     <input type="radio" id="green" class="green" name="color"/> 
 
     <label for="green" class="tile top-green">GREEN</label> 
 
     <div class="sub-tile green">12</div> 
 
     <div class="sub-tile green">13</div> 
 
     <div class="sub-tile green">14</div> 
 
     <div class="sub-tile green">15</div>

Answer 1

是的，你可以尝试以实现与下面裸露的骨头片段。

编辑请注意，您需要设置#reset初始值作为托运

#reset + label { display: block; } 
 

 
label { display: none } 
 
input[type="radio"] { display: none } 
 
div { display: none } 
 

 
input[type="radio"]:checked + label ~ label, 
 
input[type="radio"]:checked + label ~ label ~ div { display: none } 
 

 
input[type="radio"]:checked + label ~ div { 
 
    display: block; 
 
    animation: fade-in 1s; 
 
} 
 

 
input[type="radio"][id="reset"]:checked ~ label { display: block } 
 

 
.red { color: red } 
 
.blue { color: blue } 
 
.orange { color: orange } 
 

 
@keyframes fade-in { 
 
    from { opacity: 0; } 
 
    to { opacity: 1 } 
 
}

<input type="radio" name="color" class="reset" checked id="reset" /> 
 
<label for="reset">Reset</label> 
 

 
<input type="radio" name="color" class="blue" id="blue" /> 
 
<label for="blue">Blue</label> 
 

 
<div class="sub-tile blue">1</div> 
 
<div class="sub-tile blue">2</div> 
 
<div class="sub-tile blue">3</div> 
 

 
<input type="radio" name="color" class="red" id="red" /> 
 
<label for="red">Red</label> 
 

 
<div class="sub-tile red">1</div> 
 
<div class="sub-tile red">2</div> 
 
<div class="sub-tile red">3</div> 
 

 
<input type="radio" name="color" class="orange" id="orange" /> 
 
<label for="orange">orange</label> 
 

 
<div class="sub-tile orange">1</div> 
 
<div class="sub-tile orange">2</div> 
 
<div class="sub-tile orange">3</div>