Javascript----实现鼠标背景效果（同时不影响其操作）

1、效果

2、代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>鼠标背景实现</title>
    <style type="text/css">
    #d {
         40px;
        height: 40px;
        border-radius: 20px;
        background-color: red;
        pointer-events: none;
    }
    </style>
</head>
<body>
    <div id='d'></div>
    <div>
        <div>
            <a href="http://www.baidu.com">baidu</a>
        </div>
    </div>
    <script type="text/javascript">
    var d = document.getElementById("d");
    console.log(d);
    function mousePosition(ev) {
        if (ev.pageX || ev.pageY) {
            return { x: ev.pageX, y: ev.pageY };
        }
        return {
            x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,//padding
            y: ev.clientY + document.body.scrollTop - document.body.clientTop//padding
        };
    }
    document.onmousemove = function(ev) {
        ev = ev || window.event;
        var mousePos = mousePosition(ev);
        var style = "transform:translate(" + (mousePos.x - 20) + "px," + (mousePos.y - 20) + "px)";
        d.style = style;
        console.log(style);
    }
    </script>
</body>
</html>

　　3、总结：

a、pointer-events: none; //给元素解除所有事件的可能性。