JSFiddle - React, Tailwind, and code Playground

by marven gong

HTML

<div class="box"></div>
<div class="box1"></div>

CSS

@charset "utf-8";
.box {
    width: 600px;
    height: 200px;
    background: #ccc
}

.box1 {
    width: 240px;
    height: 270px;
    background: #ccc;
    margin-top: 80px;
}

.hover-border {
    display: inline-block;
    position: absolute;
    z-index: 100
}

.left-right-border {
    height: 0;
}

.left-border {
    left: 0px;
}

.right-border {
    right: 0px;
    bottom: 0px;
}

.left-right-top-bottom-border {
    width: 0;
}

.left-top-border {
    right: 50%;
    top: 0px;
}

.left-bottom-border {
    left: 0px;
    bottom: 0px;
}

.right-top-border {
    right: 0px;
    top: 0px;
}

.right-bottom-border {
    left: 50%;
    bottom: 0px;
}

JavaScript

/**
 * Created by Marven Gong on 2016/3/21.
 * jquery.niceHover v1.0.0
 */
(function($) {
    $.fn.niceHover = function(option) {
        var _target = $(this);
        var defaultOptions = {
            color: "#FF7C54",
            weight: 3
        };
        var settings = $.extend(defaultOptions, option);
        var _init = function() {
            _target.css({
                "position": "relative",
                "cursor": "pointer"
            });
            var width = _target.outerWidth();
            var height = _target.outerHeight();
            var leftBorder = $("<span class='hover-border left-right-border left-border'></span>");
            var rightBorder = $("<span class='hover-border left-right-border right-border'></span>");

            var leftTopBorder = $("<span class='hover-border left-right-top-bottom-border left-top-border'></span>");
            var leftBottomBorder = $("<span class='hover-border left-right-top-bottom-border left-bottom-border'></span>");
            var rightTopBorder = $("<span class='hover-border left-right-top-bottom-border right-top-border'></span>");
            var rightBottomBorder = $("<span class='hover-border left-right-top-bottom-border right-bottom-border'></span>");

            _target.append(leftBorder).append(rightBorder).append(leftTopBorder).append(leftBottomBorder).append(rightTopBorder).append(rightBottomBorder);
            $(".hover-border").css({
                "background-color": settings.color
            });
            $(".left-right-border").width(settings.weight + "px");
            $(".left-right-top-bottom-border").height(settings.weight + "px");
        }
        _init();

        _target.hover(function() {
            var _self = $(this);
            $(this).find(".left-top-border").animate({
                "width": "50%"
            }, "normal", function() {
                _self.find(".left-border").animate({
                    "height": "100%"
                }, "normal",...