Halo semuanya , saya akan memberikan tips atau trik Cara Mendisable Pointer Event Terhadap Element Menggunakan Properti Pointer-Event , Kadang ada kalanya kita ingin ada satu element yang tidak terpengaruh saat pointer di arahkan ke element tersebut nah untuk membuat itu css telah memberikan caranya yakini dengan menggunakan properti pointer-event.
Langsung 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;
}
Jika di jalankan hasilnya akan seperti ini :
Nah jika kalian block atau arahkan pointer ke tulisan overlay maka tidak akan terpengaruh 🙂
Itulah kegunaan dari properti pointer-event .
Semoga artikel Cara Disable Pointer Event Terhadap Element Menggunakan Properti Pointer-Event bermanfaat dan sampai bertemu pada artikel selanjutnya.