JSFiddle - React, Tailwind, and code Playground

HTML

<div class="footer-nav"> 
    <a href="#" style="color: inherit;">
        <div class="preview">
            <img src="http://upload.wikimedia.org/wikipedia/commons/b/b3/Solid_gray.png" />           <span>Previous:</span><br>
            <span>Title abc</span>
  </div>          
  </a>

 <a href="#" style="color: inherit;">
               <div class="preview">
              <img src="http://upload.wikimedia.org/wikipedia/commons/b/b3/Solid_gray.png">
<span>Next:</span><br>
  <span>Title abc</span>              
  </div>
  </a>

    </div>
</div>

CSS

.footer-nav {
    overflow: hidden;
    margin-bottom: -19px;
    margin-right: -18px;
}
.preview {
    float: right;
    border-top: 1px dashed #c9c7c7;
    border-left: 1px dashed #c9c7c7;
    padding: 8px;
    width: 262px;
    background: #e3e3e3;
}
.preview img {
    float: left;
    width: 45px;
    margin-right: 5px;
    margin-top: 1px;
}

 .preview:hover{
  background-color:#cecece;
  }

JavaScript

$(".preview").hover(function() {
$(this).find("img").attr("src", "http://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Solid_yellow.svg/200px-Solid_yellow.svg.png")
}, function() {
$(this).find("img").attr("src", "http://upload.wikimedia.org/wikipedia/commons/b/b3/Solid_gray.png")

})