Свойство pointer-events

Свойство pointer-events позволяет контролировать события, при которых элемент может стать объектом события мыши (нажатие, перетаскивание), так же может влиять на вид курсора, находясь внутри элемента, при определенных значениях.

pointer-events: none;
  • поддерживается начиная с
  • частичная поддержка до
  • не поддерживается

Значения

pointer-events: auto;

Обычное поведение, как если бы pointer-events не был указан. Полезен когда родительскому элементу задан pointer-events: none; а дочерние элементы должны вести себя как обычно

<a class="example-1" href="#">Обычная ссылка</a>

<style>
    .example-1 {
        pointer-events: auto;
    }
</style>
Обычная ссылка
pointer-events: none;

Элемент не может быть целью событий мыши, но его дочерние элементы могут, если их pointer-events имеет какое-либо другое значение, например auto

<a class="example-2" href="#">Ссылка которая не реагирует на события мыши и вид курсора будет обычный</a>

<style>
    .example-2 {
        pointer-events: none;
    }
</style>
pointer-events: none; и pointer-events: auto;
<a class="example-3" href="#">Ссылка, <span>часть которой</span> будет вести себя как обычно</a>

<style>
    .example-3 {
        pointer-events: none;
    }    
    .example-3 span {
        color: black;
        pointer-events: auto;
    }
</style>
Ссылка, часть которой будет вести себя как обычно

Читайте также

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии