JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="list-group" id="recentList">
    <div class="list-group-item" style="border-left: none; border-right: none;">
        <img class="a-img" src="./img/desktop.png" height="25" width="25">
        <a class="a-file">a.pdf</a>
        <button class="btn glyphicon glyphicon-ok btn-sm btn-current btn-default" style="float: right;">A</button>
        <button class="btn glyphicon glyphicon-star btn-sm btn-star btn-default" style="float: right;">B</button>
        <button class="btn glyphicon glyphicon-trash btn-sm btn-trash btn-default" style="display: none;">C</button>
    </div>
    ....
</div>

JavaScript

$(document).ready(function() {
    $('#recentList').on("mouseenter", function() {
        $(".btn-trash").show();
    }).on("mouseleave", function() {
       $(".btn-trash").hide();
    });
});