Question

我尝试使用纯CSS制作带有瓷砖和子瓷砖的菜单。当单击一种颜色的其中一个图块时，所有其他图块都会消失，并且只显示该颜色的子图块。我面临的问题是，在该瓷砖之后只有div中的瓷砖消失了。在瓷砖没有之前，瓷砖在div中。图像描述了实验。检查代码段。提前致谢干杯克里斯

#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>

菜单使用Tiles和SubTiles与纯CSS

1 个答案: