JSFiddle - React, Tailwind, and code Playground

HTML

<div id="function" class="functionBlock">
	<h5>Demo </h5>
	<ul>
		<li>APPLE</li>
		<li>SAMSUNG</li>
	</ul>
</div>

CSS

.functionBlock { width:200px; height:200px; border:1px solid #CCC; padding:15px;}
.functionBlock ul { visibility: hidden}
.functionBlock.show ul { visibility: visible;}

JavaScript

$("document").ready(function(){
    $("#function").mouseover(function()
	{
		$(this).addClass("show");
	}).mouseleave(function()
	{
		$(this).removeClass("show");
	});
});