JSFiddle - React, Tailwind, and code Playground

by chen644733521

HTML

<a href="#">
        <img src="http://img1.gtimg.com/finance/pics/hv1/161/22/1562/101574821.jpg" class="rootclass" left="baicu.com" right="g.cn" />
    </a>

CSS

.rootclass {
            border: none;
            position: relative;
        }

JavaScript

$(document).ready(function () {
            $(".rootclass").mousemove(function (e) {
                var positionX = e.offsetX || e.layerX || 0;
                if (positionX <= $(this).width() / 2) {

                    this.style.cursor = 'url("pre.png"),auto';
                    $(this).attr('title', 'pre');
                    $(this).parent().attr('href', $(this).attr('left'));
                } else {
                    this.style.cursor = 'url("next.png"),auto';
                    $(this).attr('title', 'next');
                    $(this).parent().attr('href', $(this).attr('right'));
                }
            });
        });