How Can I Prevent Text Selection on a Transparent Overlay DIV?

Making a DIV Unselectable for Overlaying Text

In certain scenarios, a transparent DIV overlaying text, such as a watermark, can interfere with user interaction by becoming accidentally selectable. This issue occurs even when the DIV has a lower z-index, as browsers prioritize selection based on the visible content rather than its layer.

To make a DIV unselectable, there are two viable approaches:

Using jQuery:

To disable selection using jQuery, you can use the following extension:

$('.button').disableSelection();

Using CSS:

Alternatively, you can use CSS to achieve the same result cross-browser:

.button {
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}

By applying this CSS property, you effectively disable user selection for the specified DIV, ensuring that the underlying text remains unselectable.

The above is the detailed content of How Can I Prevent Text Selection on a Transparent Overlay DIV?. For more information, please follow other related articles on the PHP Chinese website!