如何修改含子类的元素:hover事件样式？定制选中卡片hover效果

架构老林

2026-7-23

问题解决：选中卡片hover样式不生效的修复方案

问题原因

你当前写的CSS选择器 .form-option-card:hover .form-option-selected 是后代选择器，它会匹配「处于hover状态的.form-option-card元素内部的子元素中带.form-option-selected类的元素」，但你的实际结构是同一个元素同时拥有.form-option-card和.form-option-selected两个类，所以这个选择器完全匹配不到目标元素，导致样式不生效。

修复方案

使用复合类选择器，直接匹配同时拥有两个类的元素在hover状态下的样式，写法如下：

/* 选中状态的卡片hover时的专属样式 */
.form-option-card.form-option-selected:hover {
    background-color: #6454f305;
    /* 可选：添加和未选中hover区分的样式，比如调整缩放、阴影 */
    transform: scale(1.02);
    box-shadow: 0px 0px 15px #6454f329;
}

完整CSS代码示例

.form-option-card {
    padding: 16px 24px;
    display: flex;
    flex: 0 0 auto;
    box-sizing: border-box;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    border-radius: 6px;
    border: 0.5px solid #d1d1d122;
    margin: 0px 0px 12px;
    max-width: 570px;
    width: 100%;
    min-height: 64px;
    margin-left: auto;
    margin-right: auto;
    transition: transform 0.1s, border-color 0.5s, background-color 0.2s, box-shadow 0.1s;
}

.form-option-card:hover {
    transform: scale(1.01);
    background-color: #ffffff05;
    box-shadow: 0px 0px 15px #ffffff19;
}

/* 修正后的选中卡片hover样式 */
.form-option-card.form-option-selected:hover {
    background-color: #6454f305;
    transform: scale(1.02);
    box-shadow: 0px 0px 15px #6454f329;
}