div. div에서 두 스타일 전환

Question

div 요소가 있는데 그 위에 놓으면 배경색이 바뀌고 내부 스팬이 색상을 변경합니다. 예를 들어 배경 작업 만 한 전환을 사용하면 다른 전환 작업은 지연없이 즉시 전환됩니다. 여기 내 styles.less 코드는 다음과 같습니다

.transition{ 
    transition-property: color; /*standard*/ 
    transition-duration: 0.4s; 

    -webkit-transition-property: color; /*Safari e Chrome */ 
    -webkit-transition-duration: 0.4s; 

    -o-transition-property: color;  /*Opera*/ 
    -o-transition-duration: 0.4s; 

    -moz-transition-property: color; /*Firefox*/ 
    -moz-transition-duration: 0.4s; 
} 

.transition_bg{ 
    transition-property: background; /*standard*/ 
    transition-duration: 0.4s; 

    -webkit-transition-property: background; /*Safari e Chrome */ 
    -webkit-transition-duration: 0.4s; 

    -o-transition-property: background;  /*Opera*/ 
    -o-transition-duration: 0.4s; 

    -moz-transition-property: background; /*Firefox*/ 
    -moz-transition-duration: 0.4s; 
} 

.riquadri{ 
    background:#fff; 
    width:230px;  
    height:230px; 
    float:left; 
    text-align:center; 
    .transition_bg; 
     .transition 
} 

.riquadri:hover{ 
    background:#575757; 
} 

.riquadri:hover span{ 
    color:#fff; 
} 

Answer 1

하나로 전환을 결합 :

.transition{ 
    transition-property: color, background; /*standard*/ 
    transition-duration: 0.4s; 

    -webkit-transition-property: color, background; /*Safari e Chrome */ 
    -webkit-transition-duration: 0.4s; 

    -o-transition-property: color, background;  /*Opera*/ 
    -o-transition-duration: 0.4s; 

    -moz-transition-property: color, background; /*Firefox*/ 
    -moz-transition-duration: 0.4s; 
}