Flask开发webapp时JS切换卡片后CSS边框、hover效果失效问题求助

问题排查与修复方案 #

两个故障的根因 #

1. 按钮hover效果失效：你通过JS直接给按钮设置了style.backgroundColor内联样式，内联样式的优先级远高于CSS类的:hover伪类样式，导致hover定义的样式被覆盖无法生效。
2. 卡片边框消失：
   • JS循环末尾有一行多余的cardA[i].style.backgroundColor = "#f00";代码，给所有卡片强制设置了红色内联背景，覆盖了原有透明背景效果；
   • 你将卡片的display属性设置为inline，inline元素不支持宽度设置，盒模型表现和块级元素不同，导致你CSS中定义的70%宽度、蓝色边框都无法正常渲染。

修复步骤 #

1. 替换JS逻辑，删除错误代码

不要直接操作元素的style属性，改用类名切换控制按钮激活状态，同时修改卡片的display属性为block，删除多余的背景色设置代码：

function change(c){
    // 简化选择器写法，不用逐个获取元素
    const btnA = document.querySelectorAll(".lateral");
    const cardA = document.querySelectorAll(".calculator > div");

    for(let i=0; i<5; i++){
        if (i==c){
            btnA[i].classList.add("active");
            cardA[i].style.display = "block";
        }else{
            btnA[i].classList.remove("active");
            cardA[i].style.display = "none";
        }
    }
}

2. 调整CSS样式

删除原有单独给#bmi设置背景色的代码，新增激活按钮的样式规则，注意把:hover规则放在active类规则后面，保证hover效果优先级更高：

/* 删掉原来的 #bmi{background-color: #f00;} 这行 */
.lateral.active {
    background-color: #f00;
}    

.lateral:hover{
    background-color: #fff;
    transition: 1s;
    border: #fff solid 1px;
}

3. 修改默认激活按钮的HTML

给第一个按钮主动加上active类，保证页面初始加载时的激活状态和后续切换逻辑一致：

<button class="lateral active" id="bmi" onclick="change(0)">BMI</button>

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