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

Question

我有一个 div，它由一个 FontAwesome 图标和一些文本组成。我想保留图标的白色，并在指针悬停在根 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

使用后代 select 或者 select 所有后代。

.root:hover * {
  color: green
}

Answer 2

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

.root:hover svg {
  fill: green;
}

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

How to change icon colour when hovering on enclosing div container

css

reactjs

react-font-awesome