JasonY JasonY - 12 days ago 5
Javascript Question

how to avoid highlighting all text over absolute positioned cousin div

I have a problem with text-highlighting,

There is a div cover absolute positioned on top of a paragraph. In the DOM structure they are cousins.

When highlighting the paragraph text underneath, once the cursor hovers over the cover, the entire paragraph gets highlighted automatically, how to stop this?

text selection before the cover:

mouse enters the cover all text gets selected

JS fiddle:
https://jsfiddle.net/toplay3/c741LoLv/

#cover{
position:absolute;
top:10px;
left:50px;
height:100px;
width:100px;
background-color:green;
/*-webkit-user-select: none;*/
}


For some reason google slides is able to avoid this with svg,anyway to do it in html?

Answer

You can use

pointer-events: none;

on the #cover element

https://jsfiddle.net/c741LoLv/2/

This removes normal pointer functionality from the element - highlight, hover, focus etc.

The CSS property pointer-events allows authors to control under what circumstances (if any) a particular graphic element can become the target of mouse events.

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

https://css-tricks.com/almanac/properties/p/pointer-events/

Comments