JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="slices">
    <li class="slice">
        <a href="foo" title="">Foo</a>
    </li>
    <li class="slice">
        <a href="bar" title="">Bar</a>
    </li>
    <li class="slice">
        <a href="narf" title="">Narf</a>
    </li>
</ul>

CSS

<style type="text/css" media="screen">
body {
    background-color: #FFF;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.slice {
    float: left;
    overflow: hidden;
    background-color: rgba(0,0,0,0.5);
    border:1px dashed red;
}

.slice:hover {
    background-color: rgba(0,0,0,0);
} 

.slice a {
    display: block;
    text-indent: -10000px;
}
</style>

JavaScript

jQuery.noConflict();
jQuery(document).ready(function($) {
    var w = $(window);
    var width = w.width(),
        height = w.height(),
        slices = $('#slices').children();

    $.each(slices, function(idx, s) {
        var slice = $(s).children('a:first');
        slice.css('width', Math.floor(width / 3) - 2).css('height', height);

        slice.mousemove(function(evt) {
            evt.stopPropagation();
            console.log(evt.offsetX, evt.layerX);
        });
    });
});