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
}