jQuery Simple Example

HTML

<script src="//www.addressfinder.co.nz/assets/v2/widget.js"></script>
<div class="list-group" id="recentList">
    <div class="list-group-item" style="border-left: none; border-right: none;">
        <table class="list-group-item">
        <tr>
          <td>
          <img class="a-img" src="http://omangular.epizy.com/img/favicons/apple-touch-icon.png" height="25" width="25"></td>
          <td>
            <ul>
            <li><a class="a-file">file.pdf</a></li>
            <li>
            <button class="btn glyphicon glyphicon-trash btn-sm btn-trash btn-default" style="display: none;">Trash</button>
            </li>
            </ul>
       
          </td>
          <td><button class="btn glyphicon glyphicon-star btn-sm btn-star btn-default" style="float: right;">Star</button></td>
         <td>
            <button class="btn glyphicon glyphicon-ok btn-sm btn-current btn-default" style="float: right;">Current</button></td>
        </tr>
        
        </table>
        
        
        
    </div>
   
</div>

CSS

#recentList .list-group-item {
  width: 100%;
}
#recentList .list-group-item .btn-trash {
  position: absolute;
}

JavaScript

$(document).ready(function() {
  $(document).on('mouseenter', '#recentList .list-group-item tr', function() {
  //alert('mouse entered')
  $(this).find(".btn-trash").show();
})
$(document).on('mouseleave', '#recentList .list-group-item', function () {
    $(this).find(".btn-trash").hide();
});
});