Mover elemento para posição do cursor

by Salustiano Silva

HTML

<div id="bts">
    <div id="hoverLayer"></div>
    <div id="bt1"></div>
    <div id="bt2"></div>
    <div id="bt3"></div>
    <div id="bt4"></div>
</div>

CSS

* {
    box-sizing: border-box;
}
    #hoverLayer {
    	display: block;
	    width: 155px;
	    height: 50px;
	    border: 2px solid green;
	    position: absolute;
    }
    #bts {
	    display: block;
    	width: 620px;
    	height: 50px;
    	font-size: 0;
    	position: absolute;
    	z-index: 2;
    	top: 30px;
    	right: 0;
    	cursor: pointer;
    	left: 0;
    	margin: auto;
    }
    #bt1, #bt2, #bt3, #bt4 {
    	width: 155px;
        border:1px solid;
    	height: 100%;
    	display: inline-block;
    }

JavaScript

$('#bts > div:not("#hoverLayer")').on('mouseenter', function() {
    $target = $(this);
    $('#hoverLayer').css({"left":$target.position().left});
});