如何解決鼠標懸浮時背景圖標被背景顏色遮擋的問題?

巧妙解決鼠標懸停時圖標被遮擋的問題

網站或應用中,鼠標懸停效果能提升用戶體驗。然而,有時懸停時背景圖標會被新的背景顏色遮蓋。本文通過案例分析,講解如何解決此問題。

問題描述

一個搜索框,右側圖標在鼠標懸停時背景顏色改變,但圖標卻被新背景色遮擋:

如何解決鼠標懸浮時背景圖標被背景顏色遮擋的問題?

如何解決鼠標懸浮時背景圖標被背景顏色遮擋的問題?

相關css代碼:

.tx_mmenu_together .donate-btn-header .lytop_search {     height: 40px;     margin: 0;     padding: 0;     float: left;     position: relative;     z-index: 1; }  .tx_mmenu_together .donate-btn-header .lytop_search form {     width: 60px;     height: 40px;     margin: 0;     padding: 0;     position: relative; }  .tx_mmenu_together .donate-btn-header .lytop_search form .sc_ipt {     width: 0;     height: 40px;     overflow: hidden;     margin: 0;     padding: 0;     position: absolute;     left: 0;     top: 0;     transition: all 0.5s; }  .tx_mmenu_together .donate-btn-header .lytop_search form .sc_ipt input {     display: block;     width: 100%;     height: 40px;     overflow: hidden;     line-height: 40px;     color: #999999;     font-size: 14px;     margin: 0;     padding: 0 14px;     background-color: #fff;     border-radius: 20px 0 0 20px;     border: 1px solid #dfdfdf;     border-right: 0;     outline: none;     box-sizing: border-box; }  .tx_mmenu_together .donate-btn-header .lytop_search form .sc_btn {     width: 60px;     height: 40px;     overflow: hidden;     margin: 0;     padding: 0;     border-radius: 0 20px 20px 0;     float: right; }  .tx_mmenu_together .donate-btn-header .lytop_search form .sc_btn input {     display: block;     width: 60px;     height: 40px;     overflow: hidden;     margin: 0;     padding: 0;     background: #fff url('../img/home/search.png') center center no-repeat;     background-size: 40px 40px;     border: 0;     outline: none;     cursor: pointer; }  .tx_mmenu_together .donate-btn-header .lytop_search:hover form .sc_ipt {     width: 260px;     left: -260px; }  .tx_mmenu_together .donate-btn-header .lytop_search:hover form .sc_btn input {     background: #1a75bc url('../img/home/search-.png') center center no-repeat; }

問題分析

懸停時,圖標背景色從#fff變為#1a75bc,圖片也從search.png變為search-.png。問題在于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;     background-size: 40px 40px; /* 添加背景大小設置 */ }

通過確保search-.png顏色與#1a75bc匹配,懸停時圖標清晰可見。 此處也補充了background-size屬性,確保圖片大小合適。

通過簡單調整,即可解決圖標被遮擋的問題,希望對您有所幫助。

? 版權聲明
THE END
喜歡就支持一下吧
點贊9 分享