求助：生成的QR Code松开按钮后无法保持显示

问题 #

参照在线教程制作了一个QR Code生成器，代码可正常运行并显示二维码图片，但存在松开按钮后图片无法在屏幕上保持显示的问题。尝试调整过CSS中qr-code部分的display属性，但查阅资料后认为该方向有误，可能是HTML相关设置存在问题，希望得到解决方法。

现有代码 #

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style2.css">
    <style>
        .container.active .qr-code {
            display: block;
            text-align: center;
            margin-top: 20px;
        }
    </style>
</head>
<body>
   <div class="container">
    <div class="header">
        <h1>QR Code Generator</h1>
        <p>Type a URL or text to generate a QR Code</p>
    </div>
    <div class="input-form">
        <input type="text" class="qr-input" placeholder="Enter URL or text">
        <button class="generate-btn">Generate QR Code</button> 
    </div>
    <div class="qr-code">
        <img class="qr-image" alt="">
    </div>
   </div>

<script>
    var container = document.querySelector(".container");
    var generateBtn = document.querySelector(".generate-btn");
    var qrInput = document.querySelector(".qr-input");
    var qrImg = document.querySelector(".qr-image");

    generateBtn.addEventListener("click", function(event) {
        if (qrInput.value.length > 0) {
            event.preventDefault(); // Prevent form submission
            container.classList.add("active");
            var qrUrl = "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" + encodeURIComponent(qrInput.value);
            qrImg.src = qrUrl;
        }
    });
</script>
</body>
</html>

CSS代码

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins';
}

body {
    width: 100%;
    height: 100vh;
    background-color: #ff676d;
    display: flex;
    align-items: center;
    justify-content: center;
}   

.container {
    background-color: #fff;
    width: 400px;
    border-radius: 7px;
    padding: 20px;
    height: 400px;
    transition: .1s;
}

.header h1{
    font-size: 23px;
    font-weight: 500;
    margin-bottom: 5px;
}

.header p {
    font-size: 16px;
    margin-bottom: 10px;
}

input, button {
    width: 100%;
    height: 50px;
    outline: none;
    border-radius: 5px;
}

button {
    border: none;
    background-color: #1d68d8;
    font-size: 15px;
    columns: #fff;
    cursor: pointer;
}

input {
    border: 1px solid #8b8a8a;
    padding-left: 10px;
    margin-bottom: 15px;
    font-size: 15px;
}

.qr-code { 
    padding: 25px 0;
    border: 1px solid #ccc;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: .5s;
}

.container:active {
    height: 490px;
}

.container:active .qr-code {
    opacity: 1;
    pointer-events: auto;
}

解决方法 #

问题核心在于CSS中误用了:active伪类来控制容器高度和二维码显示——:active仅在元素被按住鼠标点击时生效，松开后立即失效，导致二维码消失。而你在JS中已经给容器添加了active类，但CSS里没有对应这个类的样式规则，这是关键矛盾点。

修改步骤：

1. 替换CSS中的伪类为类选择器
   将CSS里的.container:active和.container:active .qr-code替换为.container.active和.container.active .qr-code：

   .container.active {
       height: 490px;
   }
   
   .container.active .qr-code {
       opacity: 1;
       pointer-events: auto;
   }
   

   这样JS添加的active类就能稳定触发样式变化，不再依赖点击状态。

2. 移除重复内联样式（可选）
   HTML头部内联样式里的.container.active .qr-code规则与CSS文件中的flex布局冲突，可直接删除，避免样式混乱。

3. 修正按钮文字颜色错误（可选）
   CSS中按钮的columns: #fff是拼写错误，改为color: #fff，按钮文字才会显示白色。

修改完成后，点击按钮生成二维码时，容器高度会调整且二维码保持显示，松开按钮后不会消失。

内容的提问来源于stack exchange，提问作者KPO