Tengo una lupa que se mueve al mover el cursor pero esta por debajo o atras de la cruz en rojo y yo no quiero que este abajo de todo sino que este por encima de la cruz roja. Les dejo el código para que verifiquen como la cruz roja se pone en encima de la lupa y yo no quiero eso sino que sea al reves y que la lupa este adelante de todo tapando a la cruz roja. Espero que puedan ayudarme :) saludos
var lupa = document.getElementById('lupa');
document.addEventListener('mousemove', (e) => {
var x = e.pageX - 10;
var y = e.pageY - 10;
lupa.style = 'left:' + x + 'px; top:' + y + 'px;';
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
cursor: none;
}
#lupa {
font-size: 25px;
color: #4d65cf;
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
}
#lupa div:nth-child(1) {
border: 1px solid red;
width: 100%;
position: fixed;
left: 0;
}
#lupa div:nth-child(2) {
border: 1px solid red;
height: 100%;
position: fixed;
top: 0;
transform: rotate(90);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
</head>
<body>
<div id="lupa" class="fas fa-search">
<div></div>
<div></div>
</div>
</body>
</html>