我有兩個按鈕，我在顏色變化上應用了一個簡單的 0.2 秒過渡。一切正常，但我想找到另一種寫不的方法：懸停，以縮短css。
實際上有沒有辦法告訴所有懸停而不是：懸停狀態它們必須有 0.2 秒的過渡？所以我不必寫懸停而不是：每次都為每個班級懸停。
如果可能，是否還有一種方法可以指定它只應用于某些元素，例如 button ？
對不起，我是新人。我希望有人能告訴我正確的方法。我很感激任何回應，謝謝。
/*Download Button*/
a.downloadPdf {
display: inline-flex;
align-items: center;
background: #C8E6C9;
padding: 4px 15px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
color: #479C4B;
box-shadow: rgb(0 0 0 / 15%) 0px 0px 6px -2px;
}
a.downloadPdf:hover {
background: #43A047;
color: #fff;
box-shadow: rgb(0 0 0 / 15%) 0px 5px 10px 0px;
transition: all 0.2s;
}
a.downloadPdf:not(:hover) {
transition: all 0.2s;
}
/*Support Button*/
a.supportBtn {
display: inline-flex;
align-items: center;
background: #FBE9E7;
padding: 4px 15px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
color: #DF5242;
box-shadow: rgb(0 0 0 / 15%) 0px 0px 6px -2px;
}
a.supportBtn:hover {
background: #F4511E;
color: #fff;
box-shadow: rgb(0 0 0 / 15%) 0px 5px 10px 0px;
transition: 0.2s;
}
a.supportBtn:not(:hover) {
transition: 0.2s;
}<a class="downloadPdf" href="#">Download PDF</a>
<a class="supportBtn" href="#">Support</a>uj5u.com熱心網友回復：
您根本不需要:not，您可以將轉換放在基類上，以便它從懸停狀態轉換到基本狀態
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
/*Download Button*/
a.downloadPdf {
display: inline-flex;
align-items: center;
background: #C8E6C9;
padding: 4px 15px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
color: #479C4B;
box-shadow: rgb(0 0 0 / 15%) 0px 0px 6px -2px;
transition: all 0.2s;
}
a.downloadPdf:hover {
background: #43A047;
color: #fff;
box-shadow: rgb(0 0 0 / 15%) 0px 5px 10px 0px;
transition: all 0.2s;
}
/*Support Button*/
a.supportBtn {
display: inline-flex;
align-items: center;
background: #FBE9E7;
padding: 4px 15px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
color: #DF5242;
box-shadow: rgb(0 0 0 / 15%) 0px 0px 6px -2px;
transition: all 0.2s;
}
a.supportBtn:hover {
background: #F4511E;
color: #fff;
box-shadow: rgb(0 0 0 / 15%) 0px 5px 10px 0px;
transition: all 0.2s;
}<a class="downloadPdf" href="#">Download PDF</a>
<a class="supportBtn" href="#">Support</a>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/488619.html