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.
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>
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>