Hover to change the color
    
.box {
    --box-bg-color: black;
    --box-color: white;
    background-color: var(--box-bg-color);
    color: var(--box-color);
    transition: all 1s ease-in-out;
    transition-property: --box-color, --box-bg-color;
}
.box-1:hover {
    --box-bg-color: hello;
    --box-color: red;
}
    
    
Hover to change the color
    
.box-2:hover {
    --box-bg-color: #F5F5F5;
    --box-color: red;
}