Cara Disable Pointer Event Terhadap Element Menggunakan Properti Pointer-Event

Halo semuanya ,   saya akan memberikan tips atau trik Cara Mendisable Pointer Event Kepada Element Menggunakan Properti Pointer-Event ,  Kadang ada kalanya kita ingin ada satu element yang tak terpengaruh ketika pointer di arahkan ke element tersebut nah bagi membangun itu css telah memberikan caranya yakini dengan menggunakan properti pointer-event.

Seketika praktek saja ya 🙂

Salin code berikut :

HTML//

<div class=overlay><h1>OVERLAY</h1></div>
<div class=container>
  <h1>Pointer-Events Demo</h1>
  <p>
    Lorem ipsum dolor <a href=#>sit amet</a>, consectetur adipisicing elit. Sequi, ullam necessitatibus aspernatur reprehenderit facilis. Quasi, deleniti, sit rerum ipsa quos dolor officiis omnis repudiandae nulla quibusdam accusantium ducimus blanditiis quam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, voluptas magni deserunt dolor exercitationem ullam corrupti necessitatibus officia cum error <a href=#>saepe sunt soluta</a>. Iusto, dicta, aperiam soluta praesentium laudantium omnis.
  </p>
  <p>
    Lorem ipsum dolor <a href=#>sit amet</a>, consectetur adipisicing elit. Sequi, ullam necessitatibus aspernatur reprehenderit facilis. Quasi, deleniti, sit rerum ipsa quos dolor officiis omnis repudiandae nulla quibusdam accusantium ducimus blanditiis quam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, voluptas magni deserunt dolor exercitationem ullam corrupti necessitatibus officia cum error <a href=#>saepe sunt soluta</a>. Iusto, dicta, aperiam soluta praesentium laudantium omnis.
  </p>
  <p>
    Lorem ipsum dolor <a href=#>sit amet</a>, consectetur adipisicing elit. Sequi, ullam necessitatibus aspernatur reprehenderit facilis. Quasi, deleniti, sit rerum ipsa quos dolor officiis omnis repudiandae nulla quibusdam accusantium ducimus blanditiis quam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, voluptas magni deserunt dolor exercitationem ullam corrupti necessitatibus officia cum error <a href=#>saepe sunt soluta</a>. Iusto, dicta, aperiam soluta praesentium laudantium omnis.
  </p><p>
    Lorem ipsum dolor <a href=#>sit amet</a>, consectetur adipisicing elit. Sequi, ullam necessitatibus aspernatur reprehenderit facilis. Quasi, deleniti, sit rerum ipsa quos dolor officiis omnis repudiandae nulla quibusdam accusantium ducimus blanditiis quam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, voluptas magni deserunt dolor exercitationem ullam corrupti necessitatibus officia cum error <a href=#>saepe sunt soluta</a>. Iusto, dicta, aperiam soluta praesentium laudantium omnis.
  </p><p>
    Lorem ipsum dolor <a href=#>sit amet</a>, consectetur adipisicing elit. Sequi, ullam necessitatibus aspernatur reprehenderit facilis. Quasi, deleniti, sit rerum ipsa quos dolor officiis omnis repudiandae nulla quibusdam accusantium ducimus blanditiis quam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, voluptas magni deserunt dolor exercitationem ullam corrupti necessitatibus officia cum error <a href=#>saepe sunt soluta</a>. Iusto, dicta, aperiam soluta praesentium laudantium omnis.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, harum, aliquid fugiat <a href=#>molestias ipsa</a> delectus et aperiam quis vero sapiente sit laborum similique labore dignissimos dicta explicabo deleniti! Enim, itaque!
  </p>
</div>

 

CSS//

body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.25em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

hr {
  margin: 50px 0;
}

.container {
  margin: 40px auto;
  max-width: 700px;
  background-color: white;
  padding: 2em;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.25);
  z-index: 1;
  color: white;
  text-align: center;
  pointer-events:none;
}

.overlay h1 {
  font-size: 80px;
  /*    font-size: 2vw;*/

  line-height: 4;
}

a {
  color: deepPink;
}

 

Sekiranya di jalankan hasilnya akan seperti ini :

 

Nah sekiranya kalian block atau arahkan pointer ke tulisan overlay karenanya tak akan terpengaruh 🙂

Seperti itulah kegunaan dari properti pointer-event .

Semoga artikel Cara Disable Pointer Event Kepada Element Menggunakan Properti Pointer-Event bermanfaat dan hingga bertemu di artikel berikutnya.

Sumber https://kursuswebsite.org