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

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.

CodePudding user response：

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 >
  <input type="checkbox">
  <label>Label</label>
</div>

CodePudding user response：

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 >
  <input type="checkbox">
  <label>A</label>
</div>