本例子主要使用transition來實現滑鼠移入之後，標籤逐漸高亮，存在漸進的過程。具體的做法：將background-color，color等屬性，作為一個動畫來執行。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>滑鼠移入文本高亮顯示</title><style type="text/css">li{width: 400px;list-style: none;line-height: 2rem;color: black;transition: background-color 1s linear,color 1s linear;-webkit-transition: background-color 1s linear,color 1s linear;-moz-transition: background-color 1s linear,color 1s linear;-o-transition: background-color 1s linear,color 1s linear;}li:hover{background-color: #FF3d67;color: blue;}</style></head><body><ul><li>1.秦時明月之君臨天下</li><li>2.秦時明月之滄海橫流</li><li>3.秦時明月之諸子百家</li></ul></body></html>
效果對比
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
