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

user_15230845 0
Viewed 76

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.

inline css html javascript
2 Answers

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>

user_140724200

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>

user_36842650
Related