JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<div id="test" class="off" style="width:200px; height:200px; overflow:auto">Wooloo</div>

<div id="test2" class="off2" style="width:200px; height:200px; overflow:auto">Wooloo</div>

CSS

.off{margin:5px;border:20px solid #000;}
.on{margin:0px;border:25px solid #000;}

#test2 {
    width: 200px;
    -moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
}
.off2{padding:5px;border:20px solid #000;}
.on2{
    padding:0px;border:25px solid #000;}

JavaScript

$(function() {
    jQuery("#test, #test2").mouseenter( function() {
    jQuery(this).css("outlineStyle", "solid").animate({
        'outlineWidth': '5px'
    }, 200);
}).mouseout( function() {
    jQuery(this).animate({
        'outlineWidth': '0px'
    }, 200).css("outlineStyle", "solide");
});
});