pointer events through div containing text, but not through the text itself

Question

Because TextContent has horrible performances on my app in IE and I need to align a div to the right inside another larger div without knowing the width of the text, I am forced to make the div containing the label the same size as the container. How can I make the pointer events apply to the part of the label that contains the text, but not the whole width of the label.

Here's a simple fiddle explaining my problem:

#container {
  height: 20px;
  width: 350px;
  border: 1px solid black;
}
#container:hover {
  background-color: green;
}
#label {
  height: 20px;
  width: 350px;
  text-align: right;
}
#label-text:hover {
  background-color: red;
}

<div id="container">
  <div id="label">
    <div id="label-text">shorter hoverable text</div>
  </div>
</div>
<div id="result"></div>

In short, how can I make the div turn red only when I hover on the text content itself, but not the left half of the container (which should make it green), even though it hovers the label, but not the text) (the "label" div should have no pointer events unless the text - right half - is the target)width of the text. the "label" div's width cannot be changed as I am not able to use TextContent to get the

EDIT: in the real test case, the container should be move on drag, and the text can be moved along the edge of the container. Because of this issue though, I can drag the label, but I cannot select the contain.er to drag and drop

PS: I have very little leeway as to how the divs are structured.

s.kuznetsov · Accepted Answer · 2021-02-18T18:32:23.657

0

Add display: inline-block for #label-text. Like this:

#label-text {
  display: inline-block;
}

Do you need such a result?

#container {
  height: 20px;
  width: 350px;
  border: 1px solid black;
}

#container:hover {
  background-color: green;
}

#label {
  height: 20px;
  width: 350px;
  text-align: right;
}

#label-text {
  display: inline-block;
}

#label-text:hover {
  background-color: red;
}

<div id="container">
  <div id="label">
    <div id="label-text">shorter hoverable text</div>
  </div>
</div>
<div id="result"></div>

edited Feb 18 '21 at 18:32

answered Feb 18 '21 at 17:22

s.kuznetsov

14,870
3
10
25

It is what the result I am looking for, however it doesn't seem to work in my case, or even in a jsfiddle here: https://jsfiddle.net/0y7j5zuw/4/ the red background still appears. I am not sure what the difference is as it is the same code as your snippet. The red is limited to the text, but the pointer event still works as if on the text and not the container. – MorganFR Feb 18 '21 at 18:08
@MorganFR, Here is your mistake - https://ibb.co/kBMGyZC. You are duplicating. Just remove this `:hover`. – s.kuznetsov Feb 18 '21 at 18:34
@MorganFR, Did you manage to fix the problem I indicated in the screenshot? – s.kuznetsov Feb 18 '21 at 18:47
Yes, it indeed worked, how silly of an oversight on my part. To be more specific, for the purposes of my app, I added a pointer-events:none to label and a pointer-events:all to the text and it worked as expected. thanks – MorganFR Feb 19 '21 at 10:24
@MorganFR, Yes, you did the right thing. Happy to help. – s.kuznetsov Feb 19 '21 at 13:48
on IE, the pointer-event:none of the label cancels the pointer-event:all of the label-text. Any idea? It works on chrome and firefox. – MorganFR Feb 19 '21 at 16:50
@MorganFR, rule `pointer-event` is not supported by IE. I found a solution for you. They explain well how to fix it. https://stackoverflow.com/questions/5855135/css-pointer-events-property-alternative-for-ie#:~:text=Pointer%2Devents%20is%20a%20Mozilla,browsers%20for%20another%20million%20years.&text=This%20uses%20a%20plugin%20that,send%20it%20to%20another%20element. – s.kuznetsov Feb 19 '21 at 16:57

pointer events through div containing text, but not through the text itself

1 Answers1