পয়েন্টার-ইভেন্ট বৈশিষ্ট্য সহ সিএসএস-এ নির্দিষ্ট উপাদানে হোভার/মাউসওভার ইভেন্টগুলিকে কীভাবে উপেক্ষা করবেন

আমি সম্প্রতি আমার ক্লায়েন্টদের একজনের জন্য একটি টিম গ্যালারি পৃষ্ঠা তৈরি করেছি। প্রতিটি গ্যালারি আইটেম একটি UI কার্ড দ্বারা উপস্থাপিত হয় যা একটি ওভারলে ব্যবহার করে যা আপনি যখন এটির উপর আপনার মাউস সরান তখন রঙ পরিবর্তন করে৷ কিন্তু আমি একটি সমস্যায় পড়েছিলাম, যা এই টিউটোরিয়ালটিকে অনুপ্রাণিত করেছে।

UI কার্ডের বিষয়বস্তু এবং কাঠামো

প্রতিটি গ্যালারি কার্ড আইটেম এই উপাদানগুলি নিয়ে গঠিত:

• কর্মচারীর ছবি - কালো/সাদা
• কর্মচারীর নাম - সাদা
• কর্মচারীর ভূমিকা - সাদা
• একটি সূক্ষ্ম অন্ধকার পটভূমি ওভারলে

যখন ব্যবহারকারীরা প্রতিটি কার্ডের উপর তাদের মাউস সরান তখন ব্যাকগ্রাউন্ড ওভারলে একটি হালকা আধা-স্বচ্ছ হলুদ (ব্র্যান্ডের রঙ) তে রূপান্তরিত হয়।

UI কার্ডের উদাহরণ

যেহেতু আমি এই টিউটোরিয়ালটিকে একটি নির্দিষ্ট সমস্যা সমাধানের উপর ফোকাস রাখতে চাই, তাই এখানে একটি সরলীকৃত (ডিজাইন অনুযায়ী) UI কার্ড দেখতে কেমন তার সংস্করণ। এটির উপর আপনার মাউস সরানোর চেষ্টা করুন এবং পটভূমির রঙ একটি হালকা হলুদে রূপান্তর দেখুন:

কিন্তু একটি সমস্যা আছে. আপনি ইতিমধ্যে এটি স্পট হতে পারে. পাঠ্য এলাকার উপর আপনার মাউস সরানোর চেষ্টা করুন, আপনি কি এটি সমস্যা দেখতে পাচ্ছেন?

যত তাড়াতাড়ি আপনার মাউস পাঠ্য উপাদান এলাকার উপর চলে যায়, হোভার ইভেন্ট বাতিল করা হয় — এবং অবিলম্বে হলুদ থেকে, ধূসর রঙের সাথে ডিফল্ট নিষ্ক্রিয় অবস্থায় ফিরে আসে। গ্রহণযোগ্য নয়!

এখানে HTML কোড:

<div class="card">
  <div class="card-overlay"></div>
  <img
    class="card-image"
    src="/article/uploadfiles/202203/2022033109324298.jpg"
  />
  <div class="card-info">
    <div class="card-name">Employee Name</div>
    <div class="card-role">Employee Role</div>
  </div>
</div>

এবং CSS:

.card {
  max-width: 350px;
  position: relative;
}

.card-overlay {
  background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.5));
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: background-color 0.6s;
}

.card-overlay:hover {
  background-color: rgba(255, 204, 7, 0.5);
}

.card-image {
  max-width: 100%;
  display: block;
}

.card-info {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
}

.card-name,
.card-role {
  color: white;
  font-size: 1.5rem;
  line-height: 1.25;
  padding: 0.25rem;
}

.card-name {
  font-weight: bold;
}

তাহলে আপনি যখন পাঠ্য এলাকার উপর আপনার মাউস সরান তখন কেন হোভার ইভেন্টটি বাতিল হয়ে যায়?

কারণ HTML এর স্ট্যাকিং অর্ডার। স্ট্যাকিং অর্ডার সাধারণত CSS z-index দ্বারা নিয়ন্ত্রিত হয় সম্পত্তি যাইহোক, একটি ডিফল্ট স্ট্যাকিং অর্ডার আছে এটি ঘটে, যদি আপনি এটিকে প্রথমে CSS দিয়ে সরাসরি সম্বোধন না করেন।

z-index একটি স্ট্যাক অর্ডার CSS সম্পত্তি। যে উপাদানটির সর্বোচ্চ z-index আছে মান (সংখ্যা) অন্যান্য উপাদানের সামনে রাখা হয় — তাদের position ধরে নিয়ে মান একই। ডিফল্ট z-index একটি ওয়েব পৃষ্ঠার সমস্ত উপাদানের মান হল auto , যা শূন্য 0 এর সমান .

সুতরাং যেহেতু আমাদের কাছে দুটি উপাদান রয়েছে যা উভয়ই পরম অবস্থানে রয়েছে এবং উভয়েরই একটি ডিফল্ট z-index রয়েছে auto এর (0) স্ট্যাকিং অর্ডারে তাদের মধ্যে কোনটি অন্যটির সামনে (একটি জিততে হবে)?

আপনার HTML এ যেটি সবশেষে আসবে সে জিতেছে।

এই ক্ষেত্রে, <div class="card-info"> যে কন্টেইনারে নাম এবং ভূমিকা পাঠ্য উপাদান রয়েছে তা card-overlay এর পরে আসে উপাদান:

<div class="card">
  <div class="card-overlay"></div>
  <img
    class="card-image"
    src="/article/uploadfiles/202203/2022033109324298.jpg"
  />
  <div class="card-info">
    <div class="card-name">Employee Name</div>
    <div class="card-role">Employee Role</div>
  </div>
</div>

UI কার্ডের উদাহরণে, আপনি টেক্সট এলিমেন্টের উপর আপনার মাউস সরানোর সাথে সাথে আপনি আর ওভারলে এলিমেন্টকে ঘোরাচ্ছেন না, কিন্তু <class="card-info"> উপাদান, যেটিতে :hover নেই (ছদ্ম শ্রেণী) সংযুক্ত। শুধুমাত্র .card আছে (সিএসএস কোড দেখুন)।

আপনি কি করতে পারেন?

আপনি যদি শারীরিকভাবে <div class="card-overlay"></div> সরান উপাদান নিচে নীচে <div class="card-info>...</div> এই মত উপাদান:

<div class="card">
  <img
    class="card-image"
    src="/article/uploadfiles/202203/2022033109324298.jpg"
  />
  <div class="card-info">
    <div class="card-name">Employee Name</div>
    <div class="card-role">Employee Role</div>
  </div>
  <div class="card-overlay"></div>
</div>

তারপর স্ট্যাকিং অর্ডার অদলবদল হবে, এবং এটি ঘটে:

দারুণ, এখন ওভারলে ট্রানজিশন আর ব্যাহত হয় না যখন আপনি আপনার মাউসকে টেক্সট এরিয়ার উপর নিয়ে যান (এটি চেষ্টা করুন)।

কিন্তু অপেক্ষা করুন... এখন যেহেতু স্ট্যাকিং অর্ডারটি চারপাশে সুইচ করা হয়েছে, পাঠ্য উপাদানগুলি ওভারলে দ্বারা ধূসর হয়ে গেছে, যা এখন এটির সামনে/উপরে রয়েছে৷

আরেকটি তৈরি করার সময় আমরা একটি সমস্যার সমাধান করেছি৷

চলুন না সেই পদ্ধতিটি ব্যবহার করুন এবং <div class="card-overlay"> সরান উপাদান তার আসল অবস্থানে ফিরে আসে।

আমরা যদি এর পরিবর্তে .card-overlay দেই তাহলে কী হবে ক্লাস a z-index 1 এর মান ?

এখন card-overlay card-info এর সামনে রাখা হবে (যার এখনও z-index: 0 আছে ) কারণ এটির স্ট্যাক অর্ডার বেশি (z-index: 1 ) এবং এখন হোভার ইভেন্টে রঙ পরিবর্তন আবার নিরবচ্ছিন্নভাবে কাজ করবে — যা দুর্দান্ত, কিন্তু...

দুর্ভাগ্যবশত, এটি করার ফলে আমরা যখন শারীরিকভাবে <div class="card-overlay"> সরানো হয়েছিল তখন আগের মতোই হবে। <div class="card-info"> নীচের উপাদান উপাদান এইবার আমরা সরাসরি সিএসএস দিয়ে স্ট্যাকিং অর্ডার পরিবর্তন করেছি। পাঠ্য উপাদানগুলি এখনও আছে৷ ওভারলে দ্বারা ধূসর হয়ে গেছে।

এটা অগ্রহণযোগ্য!

উদ্ধারে ইভেন্ট নির্দেশক!

আমার হঠাৎ মনে পড়ল যে CSS-এর pointer-events নামে একটি প্রপার্টি আছে যা আপনাকে একটি উপাদানের প্রতিক্রিয়া করা উচিত কিনা তা সিদ্ধান্ত নিতে দেয় পয়েন্টার ইভেন্টে।

পয়েন্টার ইভেন্ট এমন কিছু যা আপনার মাউসকে করতে হবে, যেমন ক্লিক করা, স্ক্রোল করা বা আপনার মাউসকে একটি উপাদানের উপর (হোভার) সরানো।

তাই আমি সহজভাবে pointer-events: none; যোগ করেছি আমার .card-info-এ ক্লাস, তার মত:

.card-info {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  pointer-events: none; /* the fix! */
}

এবং এখন আপনি হোভার ইভেন্ট বাতিল না করেই টেক্সট সহ সমগ্র UI কার্ডের উপর ঘোরাতে পারেন — এবং পাঠ্য উপাদানগুলি তাদের 100% সাদা রঙ ধরে রাখে:

কোডপেন কোডটি দেখুন।