Quiero hacer un cursor-pointer
div completo con CSS en línea, pero actualmente solo afecta el espacio en blanco alrededor de los elementos secundarios. Probé la position
y z-index
sin éxito.
No tengo ni puedo tener una hoja de estilo externa.
<div className="cursor-pointer"> <checkbox> <label> </div>
¿Hay alguna forma de hacer esto sin aplicar el cursor-pointer
a cada elemento? También hay lógica condicional, por lo que sería bastante desordenado.
Dado que permite el uso de JS, puede usar querySelectorAll
para seleccionar todos los elementos secundarios y aplicarles la misma clase:
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>
Usando javascript, esta solución recorre el padre y los hijos y aplica el cursor directamente a cada elemento.
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>