アイテムのホバーにアイコンを表示

Question

セルフホバー状態で編集アイコンを表示しようとしていますが、素晴らしいフォントを使用しています。

どのようにクラス名をユニークにすると、各行に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を基準に相対位置を追加してみてください。私はあなたのアイコンが表示されている疑いがありますが、彼らはすべて上に浮かんで、お互いに重なっています。