如何同时更改文本和 svg 的颜色？答案

【问题标题】：How to change the color of text and svg at the same time?如何同时更改文本和 svg 的颜色？
【发布时间】：2019-06-08 11:58:51
【问题描述】：

如何同时更改 SVG 星形图标和文本的颜色？当我将鼠标悬停在单个部分上时，它会改变颜色。我不知道如何针对两者。

我尝试在按钮标签内添加填充颜色和颜色属性，但它似乎不起作用。

Codepen 链接：https://codepen.io/Zunaid/pen/RmqeNE?editors=1100

HTML 部分：

 <button class="btn"><span class="icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.99993 15L5.10172 17.5751L6.0372 12.1209L2.07446 8.25819L7.55083 7.46243L9.99993 2.5L12.449 7.46243L17.9254 8.25819L13.9627 12.1209L14.8981 17.5751L9.99993 15Z" fill="#576B51"/>
</svg> </span>
  <span class="text">Button</span>
</button>

CSS 部分：

    *{
  padding: 0px;
  margin:0px;
}
.btn {
background: linear-gradient(180deg, #FFFFFF 0%, #F1F5F0 100%);
border: 1px solid #E4F0E1;
border-radius: 4px;
margin: 100px;
display: flex;
align-items: center;
height: 32px;
 cursor: pointer;

}
.icon {
  padding: 0px 8px 0px 8px;
}
.text {
   padding-right: 8px;
}
button:hover {
  color: blue;

}

button path:hover {
   fill: blue; 

}

当我将鼠标悬停在按钮上时，我想同时更改 svg 开始和文本颜色。

【问题讨论】：

标签： javascript html css svg

【解决方案1】：

你可以用更简单的button:hover path, button:hover

*{
  padding: 0px;
  margin:0px;
}

.btn {
  background: linear-gradient(180deg, #FFFFFF 0%, #F1F5F0 100%);
  border: 1px solid #E4F0E1;
  border-radius: 4px;
  margin: 100px;
  display: flex;
  align-items: center;
  height: 32px;
 cursor: pointer;
}

.icon {
  padding: 0px 8px 0px 8px;
}

.text {
  padding-right: 8px;
}

/* I added */
button:hover path, button:hover {
  fill: blue; 
  color:blue;
}

<button class="btn"><span class="icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.99993 15L5.10172 17.5751L6.0372 12.1209L2.07446 8.25819L7.55083 7.46243L9.99993 2.5L12.449 7.46243L17.9254 8.25819L13.9627 12.1209L14.8981 17.5751L9.99993 15Z" fill="#576B51"/>
</svg> </span>
  <span class="text">Button</span>
</button>

【讨论】：