0

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>

2
  • 1
    Debes usar z-index para ello, al id lupa agregale un z-index: Ejm: 90 (este numero debe ser mayor a los demás z-index para mostrarse primero) y a sus hijos z-index: Ejm: 10 (este numero debe ser menor al z-index del padre para mostrarse por abajo)
    – Husdady
    Commented el 27 ene. 2021 a las 0:14
  • que tal si pones el estilo de la lupa en el css abajo de todo?, como primero haces el estilo de la lupa y luego dibujas las líneas quizás por eso te pone la lupa por debajo.
    – Lu CR
    Commented el 27 ene. 2021 a las 0:14

1 respuesta 1

4

Para que la lupa quede encima de las lineas roja, sólo agregale un z-index a los 2 div que se encuentran dentro del div con id lupa. En tu css agrega el z-index con valor negativo. te comparto tu código con el ajuste en el estilo de esos 2 divs.

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;
  z-index: -1; /*Esto hace que el div quede detrás del padre*/
}

#lupa div:nth-child(2) {
  border: 1px solid red;
  height: 100%;
  position: fixed;
  top: 0;
  z-index: -1; /*Esto hace que el div quede detrás del padre*/
  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>

Espero te sirva, saludos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.