How to Make a Div Invisible to Mouse Events?-CSS Tutorial-php.cn

How to Make a Div Invisible to Mouse Events?

Susan Sarandon

Release： 2024-10-31 11:23:02

Original

278 people have browsed it

How to Make a Div Invisible to Mouse Events?

Controlling Click Visibility of a Div

Problem:

To achieve a specific visual effect, you need to overlay a transparent

over text, but this overlay prevents the text from responding to clicks for actions such as link selection or text highlighting. How can you make the overlay "invisible" to mouse events?

Solution Using CSS pointer-events:

CSS offers a solution with the pointer-events property. This property allows you to define the behavior of an element with respect to mouse events.

To make a

invisible to clicks, set the pointer-events property to none. This setting tells the browser to ignore all mouse events that target the element.

<code class="css">#overlay {
  pointer-events: none;
}</code>

Copy after login

Note:

The pointer-events property is supported in modern browsers such as Firefox 3.6 , Chrome 2 , IE 11 , and Safari 4 . For cross-browser compatibility, you may need to explore alternative methods or polyfills.

The above is the detailed content of How to Make a Div Invisible to Mouse Events?. For more information, please follow other related articles on the PHP Chinese website!

source：php.cn

Previous article：How to Animate Box-Shadow with jQuery: Direct or CSS Animation? Next article：How to Count Elements with the Same Class Using jQuery?

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn