JSFiddle - React, Tailwind, and code Playground

by nosir

HTML

<a class="a">Hover me!</a><br />
<div class="b">Leave me alone before I wake up,<br /> or I'll bite You!</div>

CSS

.a{
    padding:5px;
    background:#333;
    color:#eee;
    border-radius:2px;
    cursor:default;
}

.a:hover{
    background:#555;
    color:white;
}

.b{
    margin-top:10px;
    border-radius:2px;
    padding:10px;
    display:none;
    width:300px;
    height:50px;
    background:#123;
    color:#789;
}

JavaScript

$('.a').hover(function(){
		$('.b').stop(true,false).fadeTo(3000,1); // <- fadeTo(), not FadeIn() (!!!)
	},function(){
		$('.b').stop(true,false).fadeOut(3000);
});