JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<div id="foo">
    <div id="ball">Я мяч</div>
</div>

CSS

#foo {
    height:20px;
    background:#ccc;
}
#ball {
    width:60px;
    height:20px;
    background:#c55;
}

JavaScript

function mouseV(v) {
    if (v == 1) {
        $('#foo').mouseenter(function (e) {
            var ex = e.pageX;
            $('#ball').css({
                'width': ex + 'px'
            });

        });
        //console.log(ex);
    } else {
        //$('#foo').unbind('mouseenter');
    }
};
$('#foo').mousedown(function (e) {
    mouseV(1)
}).mouseup(function (e) {
    mouseV(0)
});