在项目悬停上显示图标

我试图在单元格悬停状态上显示编辑图标，使用字体棒。在项目悬停上显示图标

如何才能使类名独特，所以我可以用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; 
}

我如何可以显示每个单元的图标？

来源

2017-05-31 Bomber

哪里是图标的代码...什么样的图标？ 'font'或'svg'还是什么？ – vsync

fontAwesome我刚刚更新了问题 – Bomber

你不应该在包装器和图标上都需要'edit'类。只是包装。您还可以将锚点''设置为display：block来保存多余的div。另外你的问题是什么？您提供的代码是否无效？ – pscl

由于您在编辑包装上使用position：absolute，请尝试添加位置：相对于.cell。我怀疑你的图标正在显示，但他们都浮到顶部彼此重叠。

来源

2017-05-31 17:41:07 pscl

在项目悬停上显示图标

回答

相关问题