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; //给元素解除所有事件的可能性。