gpt4 book ai didi

javascript - 如何同时更改文本和 svg 的颜色?

转载 作者:太空宇宙 更新时间:2023-11-04 06:10:04 24 4
gpt4 key购买 nike

如何同时更改 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 开始和文本颜色以更改。

最佳答案

你可以更简单地使用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>

关于javascript - 如何同时更改文本和 svg 的颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56506158/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com