CSS: Apply pointer-events To Text Only

Question

Is there any way to use CSS pointer-events to apply only to the text eg in a div? This seems to work with SVGs but is there also a property to apply to regular text elements only?

This is what I am trying to achieve:

<div style="width: 500px; height: 500px">
Fire only when this text is clicked!
<p><!--Don't fire in this space--></p>
Fire here too!
</div>

I do not want to create a child in the parent div to capture the event.

Thanks in advance!

Answer 1

将其放在<span>并对其应用CSS

Answer 2

 .mousePointer{ cursor: pointer; } 

 <div style="width: 500px; height: 500px"> <span style="cursor: pointer;"> Fire only when this text is clicked! </span> <p><!--Don't fire in this space--></p> <span style="cursor: pointer;"> Fire Here </span> </div> Or <div style="width: 500px; height: 500px"> <span class="mousePointer"> Fire only when this text is clicked! </span> <p><!--Don't fire in this space--></p> <span class="mousePointer"> Fire Here </span> </div> 

Answer 3

Could something like this work?

div {
  pointer-events: auto;
}

div p {
  pointer-events: none;
}

Or select all children like

div * {
  pointer-events: none;
}

I'm not sure on your situation, but a little more html like a span tag would help keep things a little cleaner.

Answer 4

First, there is no text node selector in CSS. So if you don't want to add any children in your parent div, you would have to exclude all other children. For example:

<div>
    No pointer events here
    <div class="other-class1"></div>
    <div class="other-class2"></div>
    <p></p>
    No pointer events here
<div>

Your selector would be something like:

div{
    pointer-events: auto;
}
div:not(.other-class1):not(.other-class2):not(p){
    pointer-events: none;
}