css - 悬停在封闭的div容器上时如何更改图标颜色

Question

我有一个由 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
}

但是这样做只会改变文本的颜色，而不是图标的颜色。

Answer 1

使用后代选择器，选择所有后代。

.root:hover * {
  color: green
}

Answer 2

如果您只想更改图标的颜色，这将有所帮助

.root:hover svg {
  fill: green;
}