JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li class="liDoc"><a href="">My link</a> <i class="fa fa-trash delDoc">icon</i></li>
</ul>

CSS

.delDoc {
      color: transparent;
      font-size: 12px;
      cursor: pointer;
    }
    
    .liDoc:hover > .delDoc {
      color: silver;
    }
    
   .liDoc .delDoc:hover {
      color: red;
    }