কম্পিউটার টিউটোরিয়াল

CSS pointer-events প্রপার্টি


pointer-events প্রপার্টি নির্দিষ্ট করে যে পয়েন্টার ইভেন্ট ট্রিগার হওয়া সত্ত্বে এলিমেন্টটি কিছু অ্যাকশন করবে কিনা। পয়েন্টার ইভেন্ট মাউস ক্লিক, টাচ, স্টাইলাস ইত্যাদি দ্বারা ট্রিগার হতে পারে।

উদাহরণ

নিচের কোডটি CSS-এ pointer-events প্রপার্টি দেখায়:

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.pointer1 {
    font-size: 20px;
    padding: 10px;
    pointer-events: none;
}
.pointer2 {
    font-size: 20px;
    padding: 10px;
    pointer-events: auto;
}
</style>
</head>
<body>
<h1>Pointer-events property example</h1>
<div class="pointer1"> Go to <a href="https://www.wikipedia.org">wikipedia.org</a> </div>
<div class="pointer2"> Go to <a href="https://www.google.com/">google.com</a> </div>
<h2>Hover over the above links to see pointer events</h2>
</body>
</html>

আউটপুট

উপরোক্ত কোড নিচের আউটপুটটি তৈরি করবে:

CSS pointer-events প্রপার্টি

দ্বিতীয় লিঙ্কের উপরে হোভার করলে আপনি মাউস পয়েন্টার দেখতে পাবেন যেহেতু আমরা pointer-events প্রপার্টি সেট করেছি।


  1. CSS user-select প্রোপার্টি

  2. CSS font-size-adjust প্রপার্টি

  3. CSS white-space প্রপার্টি

  4. CSS-এ writing-mode প্রপার্টি