如何为单个HTML div容器设置两组不同参数的CSS hover过渡效果

API 探路者

2026-9-27

问题原因

CSS 中同一选择器下重复声明同一个属性时，后面的声明会直接覆盖前面的所有配置。你写了两条独立的transition规则，第一条边框相关的过渡配置被第二条背景、文本相关的配置完全覆盖，所以第一组属性变化没有过渡动画，直接生效。

解决方法

把所有属性的过渡配置都放在同一条transition声明中，不同属性的配置用逗号分隔即可，同时按你的作业要求调整过渡时长、延迟、缓动函数的参数，正确写法如下：

/*J'ai adapté la taille du div via essai-erreurs, et j'ai trouvé qu'à 250px, la taille était juste suffisant.*/
.dv_ti{
    width: 250px;
    border: 6px solid #ED7D31;  
    background-color: #FFFF99;
    border-radius: 20px;
    /* 所有过渡配置写在同一条transition里，用逗号分隔 */
    transition: 
        /* 第一组：边框相关，时长3s，缓动ease-in-out，延迟1s启动 */
        border-radius 3s ease-in-out 1s,
        border-width 3s ease-in-out 1s,
        border-style 3s ease-in-out 1s,
        border-color 3s ease-in-out 1s,
        /* 第二组：背景文本相关，时长3s，缓动linear，延迟2s启动 */
        background-color 3s linear 2s,
        color 3s linear 2s,
        font-weight 3s linear 2s;
}

.dv_ti:hover{
    border-width: 12px;
    border-style: ridge;
    border-radius: 0px;
    border-color: purple;
    background-color: black;
    color: white;
    font-weight: bolder;
}