如何解决将鼠标悬停在封闭的 div 容器上时如何更改图标颜色
我有一个由 FontAwesome 图标和一些文本组成的 div。我想保留图标的白色,并在指针悬停在根 div 顶部时将其更改为绿色。我该怎么做?
组件:
function GroceryItem({ title }) {
return (
<div className="root">
<div className="row-content">
<FontAwesomeIcon icon={faPlusSquare} className="add-icon"/>
<p>{title}</p>
</div>
</div>
)
}
造型:
.root {
background-color: rgba(230,230,230);
margin: 10px 0px;
}
.row-content {
display: flex;
padding: 15px;
}
.add-icon {
color: whitesmoke;
}
我想我可以改变图标的颜色,如果我设置:
.root:hover {
color: green
}
但是这样做只会改变文本的颜色,而不是图标的颜色。
解决方法
使用后代选择器,选择所有后代。
.root:hover * {
color: green
}
,
如果您只想更改图标的颜色,这会有所帮助
.root:hover svg {
fill: green;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。