如何使我的CSS过渡只适用于一个元素?

Question

我想使过渡只适用于悬停效果，它改变了颜色。过渡不应影响边框半径的变化。

.FAQ-Question {
transition: all 0.2s ease-in-out;
}
.FAQ-Active, .FAQ-Question:hover {
color: rgb(127, 255, 159);
background-color: rgb(0, 0, 120);
}
.FAQ-Active {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}

Answer 1

您已经添加了all作为转换属性的值。而不是"all"只需指定要应用过渡效果的属性名称。

.FAQ-Question {
transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

CSS3 Transition - MDN Article

Answer 2

可以使用CSS "transition-property"属性声明只有特定的属性应该受到转换的影响。添加

transition-property: background-color;

让元素只显示背景色。