css樣式優化：解決鼠標懸停遮擋背景圖標問題
網頁設計中，鼠標懸停時背景圖標被背景顏色遮擋是常見問題。本文通過CSS代碼示例，演示如何調整背景圖標和顏色設置，提升用戶體驗。
問題描述： 搜索框鼠標懸停時，藍色背景遮擋了白色搜索圖標。目標是讓圖標在懸停狀態下依然清晰可見。
初始CSS代碼：
.tx_mmenu_together .donate-btn-header .lytop_search form .sc_btn input { /* ...其他樣式... */ background: #fff url('../img/home/search.png') center center no-repeat; background-size: 40px 40px; /* ...其他樣式... */ } .tx_mmenu_together .donate-btn-header .lytop_search:hover form .sc_btn input { background: #1a75bc url('../img/home/search-.png') center center no-repeat; }
問題分析： 懸停狀態下使用了不同的圖片search-.png，導致圖標被藍色背景(#1a75bc)遮擋。
立即學習“前端免費學習筆記（深入）”；
解決方案： 統一懸停和普通狀態下的圖片，并調整顏色設置確保圖標可見。
優化后的CSS代碼：
.tx_mmenu_together .donate-btn-header .lytop_search form .sc_btn input { /* ...其他樣式... */ background: #fff url('../img/home/search.png') center center no-repeat; background-size: 40px 40px; /* ...其他樣式... */ } .tx_mmenu_together .donate-btn-header .lytop_search:hover form .sc_btn input { background: #1a75bc url('../img/home/search.png') center center no-repeat; /* 使用同一張圖片 */ }
通過使用相同的圖片search.png，并保持藍色背景(#1a75bc)，確保圖標在懸停狀態下仍然清晰可見，從而改善用戶體驗。 如果圖標在藍色背景下仍然難以辨認，可以考慮調整圖標顏色或背景顏色對比度。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
