按钮Hover效果异常：鼠标悬停#search-button时.icon-search无法变白

算力阿峰

2026-5-28

解决按钮Hover时图标变色的问题

我来帮你搞定这个hover效果的问题～你现在的问题出在CSS选择器的写法上，当前代码并没有把按钮的hover状态和内部的图标关联起来。

问题分析

你原来的CSS里这行代码：

#search-button, .icon-star:hover { fill: white; color: white }

这里的逗号表示两个独立的选择器：一个是#search-button（不管是否hover，都会应用样式），另一个是.icon-star:hover（只有星星图标hover时才变色）。完全没有处理当#search-button hover时，它内部的.icon-search变色的逻辑。

解决方案

你需要使用后代选择器，指定当#search-button处于hover状态时，它内部的.icon-search元素改变fill颜色。修改后的完整CSS如下：

.icon-search { 
  fill: #868585; 
  width: 20px;
  margin: 0 20px;
} 

#search-button { 
  border-radius: 0px 2px 2px 0px; 
  border-color: #303030 !important; 
  background-color: #343434; 
  border: 2px solid; 
  cursor: pointer; 
  outline: none; 
} 

/* 关键修改：按钮hover时，内部的图标变色 */
#search-button:hover .icon-search { 
  fill: white; 
}