JSFiddle - React, Tailwind, and code Playground

HTML

<div class="item">
    <a href="#">Item 1.....more text here</a>
    <div class="actions">
      <a href="#">Opt 1</a> <a href="#">Opt 2</a>
    </div>
</div>
  <div class="item">
    <a href="#">Item 2</a>
    <div class="actions">
      <a href="#">Opt 1</a> <a href="#">Opt 2</a>
    </div>
  </div>

CSS

.actions{display:none;}
.item{margin:30px;}

JavaScript

$(document).on({
    mouseenter: function () {
       $(this).children('.actions').stop().fadeIn('fast');
    },

    mouseleave: function () {
        $(this).children('.actions').stop().fadeOut('fast');
    }
}, '.item');