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>