Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Calculadora

0

72
Vistas
Make parent div cursor-pointer including child elements with inline styling?

I want to make an entire div cursor-pointer with inline CSS, but it currently only affects the whitespace around the child elements. I've tried position and z-index to no avail.

I do not and cannot have an external stylesheet.

<div className="cursor-pointer">
  <checkbox>
  <label>
</div>

Is there any way to do this without applying the cursor-pointer to every element? There's conditional logic as well so that would get pretty cluttered.

5 months ago · Santiago Trujillo
2 Respuestas
Responde la pregunta

0

Since you allow the usage of JS, you could use querySelectorAll to select all child elements and apply the same class to it:

let el = document.querySelectorAll('.cursor-pointer *');
el.forEach(ele => ele.classList.add('cursor-pointer'));
/* just for demonstration purpose */
.cursor-pointer {
  cursor: not-allowed;
}
<div class="cursor-pointer">
  <input type="checkbox">
  <label>Label</label>
</div>

5 months ago · Santiago Trujillo Denunciar

0

Using javascript, this solution loops through the parent and children and applies the cursor directly to each element.

let pointers = document.querySelectorAll(".cursor-pointer");



pointers.forEach(function(el) {
  let children = el.querySelectorAll("*");
  children.forEach(function(c) {
    c.style.cursor = "pointer";
  });
  el.style.cursor = "pointer";
});
<div class="cursor-pointer">
  <input type="checkbox">
  <label>A</label>
</div>

5 months ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar empleo Planes Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.