CSS3可以幫助我們阻止默認事件,使元素表現更為豐富,包括以下事件:
a:link /* 默認鏈接樣式 */ a:hover /* 鏈接懸停樣式 */ input[type="text"] /* 默認輸入框樣式 */ button /* 默認按鈕樣式 */
下面的代碼展示了如何阻止默認事件:
a:link, a:hover { color: red; /* 將鏈接的默認顏色改為紅色 */ text-decoration: none; /* 去掉鏈接的下劃線 */ cursor: pointer; /* 鼠標移動到鏈接上時樣式變為手型 */ } input[type="text"] { width: 200px; /* 輸入框的默認寬度為200px */ height: 30px; /* 輸入框的默認高度為30px */ border: none; /* 去掉輸入框的邊框 */ background-color: #f5f5f5; /* 將背景顏色設置為灰色 */ outline: none; /* 去掉輸入框的默認外邊框 */ } button { background-color: #4CAF50; /* 默認按鈕顏色為綠色 */ border: none; /* 去掉按鈕的邊框 */ color: white; /* 按鈕文字顏色為白色 */ padding: 15px 32px; /* 按鈕大小 */ text-align: center; /* 文字居中 */ text-decoration: none; /* 去掉按鈕的下劃線 */ display: inline-block; /* 按鈕以行內塊方式展示 */ font-size: 16px; /* 按鈕文字大小 */ margin: 4px 2px; /* 按鈕間距 */ cursor: pointer; /* 鼠標移動到按鈕上時樣式為手型 */ } button:hover { background-color: #3e8e41; /* 鼠標移動到按鈕上時背景顏色變為深綠色 */ }
通過使用CSS3阻止默認事件,我們可以輕松地改變元素的表現形式,以實現更好的用戶體驗。
上一篇css3陰影圖標