JSFiddle - React, Tailwind, and code Playground

by Siva Charan

HTML

<div id="rect">Try Mouse Over and Mouse Out Using Slide</div>
<br/>
<div id="rect1">Try Mouse Over and Mouse Out</div>

CSS

.selected {
    color: Red;
}

JavaScript

$('#rect, #rect1').mouseover(function(){    
    $(this).attr('class','selected');
});

$('#rect').mouseout(function(){
    $(this).slideUp().removeAttr('class').slideDown();
});

$('#rect1').mouseout(function(){
    $(this).fadeOut('slow').removeAttr('class').fadeIn('slow');
});