CODEWITHSUNDEEP
css
yarek
yarek

Reputation: 12044

css3 pointer-event NOT on child?

I have the folowwing structure

<div class='offline'>some text <button class='delete'>Delete</button></div>

Is it possible to disable the div with pointer-events: none but KEEP the button active ?

I tried with

div.offline:not(.delete) {
    pointer-events: none;
}

No success. Any idea ?

Upvotes: 2

Views: 4152

Answers (3)

jcuenod
jcuenod

Reputation: 58405

The documentation for the pointer-events: none;:

none
The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

Note the emphasis added above.

So basically descendants should still have those events if you set them:

.offline .delete {
  pointer-events: auto;
}

Upvotes: 0

Etheryte
Etheryte

Reputation: 25310

You can disable events on the parent and reenable them on the child.

.parent {
  pointer-events: none;
}

.child {
  pointer-events: auto;
}
<div class='parent'>
  foo
  <button class='child'>bar</button>
</div>

Upvotes: 7

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

Given this:

div.offline:not(.delete) {
  pointer-events: none;
}

You are targeting divs with class offline, which don't have class delete.

Since your sole div doesn't have a delete class, it is targeted.

To target all descendant elements of div.offline that don't have the delete class, you would do this:

div.offline :not(.delete) {  //note the space before ":not"
  pointer-events: none;
}

However, that excludes text nodes. So both "some text" and the delete button would still receive pointer events.

Your only option is to create a default style for the parent, which is overridden by the child:

div.offline {
  pointer-events: none;
}

div.offline .delete {
  pointer-events: auto;
}

Upvotes: 0

Related Questions