JSFiddle - React, Tailwind, and code Playground

by lukempeters

HTML

<h1>Buttons: Inner Glow Following Cursor</h1>
<div id="who">by <a href="http://www.articleaccount.com" target="_blank">Luke Peters</a></div>

<div class="input">
    Item One
    <div class="glow"></div>
</div>

<div class="input">
    Item Two
    <div class="glow"></div>
</div>

<div class="input">
    Item Three
    <div class="glow"></div>
</div>

<div class="input">
    Item Four
    <div class="glow"></div>
</div>

<div class="input">
    Item Five
    <div class="glow"></div>
</div>

<div class="input">
    Item Six
    <div class="glow"></div>
</div>

<div class="input">
    Item Seven
    <div class="glow"></div>
</div>

<div class="input">
    Item Eight
    <div class="glow"></div>
</div>

<div class="input">
    Item Nine
    <div class="glow"></div>
</div>

CSS

body {
    font-family: Verdana, Tahoma, Sans;
    font-size: 13px;
    color: #ffffff;
    background: #555555;
}

h1 {
    margin: 0;
    font-size: 20px;
    text-shadow: 1px 1px 0 #000000;
}

div#who {
    margin: 0 0 16px 0;
    font-size: 10px;
}

div#who a, div#who a:visited {
    color: #ffffff;
    text-decoration: none;
}

div#who a:hover {
    border-bottom: 1px dotted #ffffff;
}

div.input {
    position: relative;
    margin: 0 0 4px 4px;
    padding: 8px 12px 0 12px;
    width: 100px;
    height: 26px;
    border-top: 1px solid #555555;
    border-left: 1px solid #555555;
    border-right: 1px solid #111111;
    border-bottom: 1px solid #111111;
    text-align: center;
    overflow: hidden;
    cursor: pointer;
    float: left;
    background: #333333;
}

div.glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 400px;
    height: 400px;
    display: none;
    opacity: 0.8;
    background: url('http://www.lukepeters.me/glow.png') top left no-repeat;
}

JavaScript

$('.input').hover(function(){

    $(this).mousemove(function(e){
        
        var thisOffset = $(this).offset();
        var mouseY = e.clientY - thisOffset.top - 200 + 'px';
        var mouseX = e.clientX - thisOffset.left - 200 + 'px';
        
        //alert(thisOffset.top + '\n' + thisOffset.left);
        
        $(this).children('.glow').fadeIn(100).css('left', mouseX).css('top', mouseY);
        
    });

}, function(){
    $(this).children('.glow').fadeOut(300);
});