JSFiddle - React, Tailwind, and code Playground

HTML

<article class="clearfix">
                        <header>
                        <span id="folder-icon_png" class="sprites"></span>
                        <p class="folder"><span id="filebox_png" class="sprites"></span>Thesis Research</p>
                            <div class="folder-hover">
                                <a class="shareit"><span id="shareit_icon_png" class="sprites"></span>share</a>
                                <a href="" ><span id="deleteit_icon_png" class="sprites"></span>delete</a>
                            </div>        
                        </header>
                            <ul class="folder-items" id="">
                                <li><a href=".pdf">Thesis proposal.pdf</a>
                                <div class="file-hover">
                                    <a class="shareit"><span id="shareit-icon_png" class="sprites"></span>share</a>
                                    <a href="" ><span id="deleteit-icon_png" class="sprites"></span>delete</a>
                                </div>
                                    </li>
                                <li><a href=".doc">Thesis references.doc</a>
                                <div class="file-hover">
                                    <a class="shareit"><span id="share-icon_png" class="sprites"></span>share</a>
                                    <a href="" ><span id="delete-icon_png" class="sprites"></span>delete</a>
                                </div>
                                    </li>
                                <li><a href=".xls">Survey results.xls</a>
                                <div class="file-hover">
                                    <a class="shareit"><span id="share-icon_png" class="sprites"></span>share</a>
                                    <a href="" ><span id="delete-icon_png" class="sprites"></span>delete</a>
                                </div>
                                </li>
                               ...

CSS

.file-hover { display: none; background: beige; float: left; width: 100%; line-height: 32px; margin-top: -32px; }

.folder-items li {display: block; width: 100%; }
.folder-items a { float: left; width:100%; }

.file-hover a { float: right; }
li { line-height: 32px; vertical-align: middle; margin-bottom: 10px; }

JavaScript

$('.folder-items a').hover(function(){
   $(this).siblings('.file-hover').toggle();
});