在項目懸停上顯示圖標

我試圖在單元格懸停狀態上顯示編輯圖標，使用字體棒。在項目懸停上顯示圖標

如何才能使類名獨特，所以我可以用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

在項目懸停上顯示圖標

回答

相關問題