CSS pointer-events প্রপার্টি ব্যবহার করে নির্দিষ্ট HTML এলিমেন্টে মাউসওভার/হভার (:hover) ইভেন্ট ইগনোর/রিমুভ করার পদ্ধতি শিখুন।
UI কার্ড কন্টেন্ট ও স্ট্রাকচার
এক টিম গ্যালারি পেজে প্রতিটি কার্ডে থাকে: কর্মীর ফটো (ব্ল্যাক/হোয়াইট), নাম (সাদা), ভূমিকা (সাদা), এবং একটি সাবল ডার্ক ব্যাকগ্রাউন্ড ওভারলে। মাউস হবরে ওভারলে লাইট সেমি-ট্রান্সপারেন্ট ইয়েলো (ব্র্যান্ড কালার) এ ট্রানজিশন করবে।
UI কার্ড উদাহরণ
Employee Name
Employee Role
সমস্যা: মাউস টেক্সট এলিমেন্টের ওপর গেলে হভার ইভেন্ট ক্যান্সেল হয়ে যায়—ওভারলে ডিফল্ট গ্রে কালারে ফিরে যায়।
কারণ: HTML স্ট্যাকিং অর্ডার
HTML-এ <div class="card-info"> (টেক্সট কন্টেইনার) <div class="card-overlay">-এর পরে আসে। ডিফল্ট z-index: auto (0) रहने على, HTML-এ যেটি পরে আসে সেটি সামনে থাকে। ফলে মাউস টেক্সটের ওপর গেলে ওভারলে-র হভার ক্যান্সেল হয়।
প্রথম চেষ্টা: HTML অর্ডার বা z-index পরিবর্তন
ওভারলে HTML-এ নিচে আনলে বা z-index: 1 দিলে হভার কাজ করে, কিন্তু টেক্সট ওভারলে দ্বারা গেরে যাবে (গ্রে হয়ে যাবে)—নতুন সমস্যা।
সমাধান: pointer-events: none
pointer-events প্রপার্টি দিয়ে ডিসাইড করা যায় কোন এলিমেন্ট পয়েন্টার ইভেন্টে (ক্লিক, স্ক্রোল, হভার) রিয়্যাক্ট করবে কিনা।
.card-info { position: absolute; bottom: 2rem; left: 2rem; pointer-events: none; /* the fix! */ }এখন পুরো কার্ডে হভার করলে ওভারলে ট্রানজিশন বাধা পাবে না, এবং টেক্সট ১০০% সাদা থাকবে।
Employee Name
Employee Role
CodePen-এ পূর্ণ কোড চেক করুন।
