在项目悬停上显示图标
问题描述:
我试图在单元格悬停状态上显示编辑图标,使用字体棒。在项目悬停上显示图标
如何才能使类名独特,所以我可以用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;
}
我如何可以显示每个单元的图标?
答
由于您在编辑包装上使用position:absolute,请尝试添加位置:相对于.cell。我怀疑你的图标正在显示,但他们都浮到顶部彼此重叠。
哪里是图标的代码...什么样的图标? 'font'或'svg'还是什么? – vsync
fontAwesome我刚刚更新了问题 – Bomber
你不应该在包装器和图标上都需要'edit'类。只是包装。您还可以将锚点''设置为display:block来保存多余的div。另外你的问题是什么?您提供的代码是否无效? – pscl