在项目悬停上显示图标

Question

我正在尝试使用font awesome在单元格悬停状态下显示编辑图标。

如何使类名称唯一，以便我可以使用每行的css来定位它？

import {Icon} from 'react-fa'

if(this.props.day.achievements) {
   listItems = this.props.day.achievements.map((achievement) => (
       <div className="cell" key={achievement + "_achievements"}>
         {achievement}
        <div className="edit">
          <a href="#">
            <Icon name="pencil-square" className="edit" />
          </a>
        </div>
       </div>
   ))
}

我正在使用以下css：

.cell:hover .edit {
    display: block;
}

.edit {
    padding-top: 7px;   
    padding-right: 7px;
    position: absolute;
    right: 0;
    top: 0;
    display: none;
}

.edit a {
    color: #000;
}

如何显示每个单元格的图标？

Answer 1

由于您在编辑包装器上使用position：absolute，请尝试相对于.cell添加position：。我怀疑你的图标正在显示，但它们全部浮动到顶部相互重叠。