将鼠标悬停在封闭的 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;
}