使用CSS 實現懸停時從左到右的背景顏色填充
實現懸停時從左到右的背景顏色填充在元素上，採用線性漸層和過渡。首先在 50% 標記處配置具有兩種顏色的線性漸變，例如紅色和藍色。然後，將漸層設定為位於右側，並將元素的大小相對於其寬度和高度加倍（例如 200%）。
當元素懸停在上方時，將背景位置改為「左邊」。合併「過渡：全 2 輕鬆；」應用平滑過渡。
對於需要供應商前綴的瀏覽器，請參閱初始問題下的註解。
其他自訂
建立顏色過渡，將漸變寬度增加到300% 並調整開始（例如34%）和結束（例如65%) 相應地定位。
範例：
<code class="css">div {
font: 22px Arial;
display: inline-block;
padding: 1em 2em;
text-align: center;
color: white;
background: red; /* default color */
/* Linear gradient and initial position */
background: linear-gradient(to left, salmon 50%, lightblue 50%) right;
background-size: 200%;
transition: .5s ease-out;
}
div:hover {
background-position: left;
}</code>HTML：
<code class="html"><div>Hover me</div></code>
以上是如何使用 CSS 建立懸停時從左到右的背景顏色填充？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
