How to give a div's padding a different cursor without a wrapper div-CodePudding

I am working with a div element that has a pointer cursor on hover. But I want only its padding to have a different cursor. How can I achieve this without wrapping it in another div?

CodePudding user response：

You can put a before pseudo element on the div. Give that dimension = (size of the div plus whatever padding is required).

Make sure space is reserved for the div plus padding by giving the div margins of the relevant sizes.

That way no special wrapper div is required.

div {
  position: relative;
  --padding-top: 10px;
  --padding-right: 20px;
  --padding-bottom: 40px;
  --padding-left: 10px;
  margin: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
  background: cyan;
  width: 200px;
  height: 100px;
}

div::before {
  content: '';
  width: calc(100%   var(--padding-left)   var(--padding-right));
  height: calc(100%   var(--padding-top)   var(--padding-bottom));
  position: absolute;
  top: calc(-1 * var(--padding-top));
  left: calc(-1 * var(--padding-left));
  background: pink;
  z-index: -1;
  cursor: not-allowed;
}

<div></div>

CodePudding user response：

as you can see here on MDN

Note: Padding creates extra space within an element. In contrast, margin creates extra space around an element.

you can achieve this with margin on child and no parent !