JSFiddle - React, Tailwind, and code Playground

by dolours

HTML

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

  <button id="test">Hover Me</button>
  <ul class="tester">
    <li>hello</li>
    <li>How are you</li>
    <li>hello</li>
    <li>How are you</li>
    <li>hello</li>
    <li>How are you</li>
    <li>hello</li>
    <li>How are you</li>
  </ul>
<

CSS

ul{ list-style-type:none; margin:0px; padding:0px;}
li{ border:2px solid #ccc; width:250px; background:#666;}
.tester{ display:none;}

JavaScript

$(document).ready(function(){

  $("#test").mouseenter(function () {
$('.tester').slideDown(500);
  });

  $('.tester').mouseleave(function() {
    $(this).slideUp(500);   
  });

});