需要帮助了解如何在不使用 JavaScript 的情况下检查缩略图上的单选按钮后如何在缩略图上方显示更大的图像？

Question

这是我的代码。当我单击 image1 时，相同的 image1 将显示在更大的容器中，但是我只能将更大的图像容器放置在我拥有的缩略图下方，因为需要将类 image-bg 放置在所有缩略图的无线电功能下方。 我想知道是否有办法将类 image-bg 或响应更大的图像放在小缩略图的顶部？我想在不使用任何 JavaScript 的情况下做到这一点。任何帮助将不胜感激。

    .image-bg{
    margin: 10px 100px 10px 300px;
        width: 500px;
        height: 500px;
        border: 1px solid #222;

    }


    .image-box input[type="radio"]{
     width: 80px;
     height: 80px;
     display: inline-block;
     border: 1px solid #D3D3D3;
     outline: none;
          appearance: none;
 }

    #img-01{
        background-image: url(<image1>);
            background-size: cover;
    }  
#img-02{
        background-image: url(<image2>);
            background-size: cover; 
    }  

    
    #img-01:checked ~ .image-bg{
        background-image: url(<image1>);
            background-size: cover;
    }

    #img-02:checked ~ .image-bg{
        background-image: url(<image2>);
            background-size: cover;
    }
    



<div class="image-box">
            <input type="radio" id="img-01" name="image" checked>
    <input type="radio" id="img-02" name="image">       
    <div class="image-bg"></div>
</div>

当我把“”放在上面时。较大图像的边框将显示在缩略图上方，但任何时候我单击任何缩略图图像，边框都不会显示任何响应图像。

Answer 1

如果使用 Flexbox 或 CSS 网格，您可以控制元素的视觉顺序。

在此示例中，我将父级设置为 Flexbox 容器，并根据您的代码应用了一些合理的值。

在一切之前让大图出现的技巧都在

order: -1;

。

我为您的输入添加了标签以方便访问，并将它们放在输入之后，因为这是根据选中状态控制标签的常见需求。 （标签用作拇指，而不是输入字段。）

通常输入无线电在视觉上是隐藏的，您可以搜索该解决方案。

这是创建一个纯 CSS 图像库的好方向，无需 javascript，因为如果你可以在没有 js 的情况下做到这一点，那么你应该这样做，但是需要一些复杂的代码才能让不同的无线电触发不同的图像。

   .image-box {
     display: flex;
     flex-flow: row wrap;
     gap: 1vw;
   }
   
   label {
     background-color: silver;
     flex: 0 0 80px;
   }
   
   [type='radio'] {
     /* replace this with visually hidden code */
     /* clip-path: .... */
     height: 1px;
     position: absolute;
     width: 1px;
   }

   [type='radio']:checked + label {
     background-color: lightgreen;
   }
   
   .image-bg{
    margin: 10px 100px 10px 300px;
        width: 500px;
        height: 500px;
        border: 1px solid #222;
        flex: 1 0 100%;
        order: -1;

    }


    .image-box input[type="radio"]{
     width: 80px;
     height: 80px;
     display: inline-block;
     border: 1px solid #D3D3D3;
     outline: none;
          appearance: none;
 }

    #img-01{
        background-image: url(<image1>);
            background-size: cover;
    }  
#img-02{
        background-image: url(<image2>);
            background-size: cover; 
    }  

    
    #img-01:checked ~ .image-bg{
        background-image: url(<image1>);
            background-size: cover;
    }

    #img-02:checked ~ .image-bg{
        background-image: url(<image2>);
            background-size: cover;
    }
    

<div class="image-box">
            <input type="radio" id="img-01" name="image" checked>
            <label for="img-01">Img 01</label>
    <input type="radio" id="img-02" name="image">
    <label for="img-02">Img 02</label>
    <div class="image-bg"></div>
</div>