জাভাস্ক্রিপ্ট দিয়ে মাউস প্রবেশ করলে এলিমেন্ট দেখান

বলুন আপনার কাছে একটি অদৃশ্য উপাদান রয়েছে (যেমন একটি অ্যাকশন বার/মেনু) যা আপনি প্রদর্শন করতে চান যখন ব্যবহারকারীর মাউস সেই এলাকায় প্রবেশ করে। আমরা একটি জাভাস্ক্রিপ্ট মাউসেন্টার ইভেন্ট সেট আপ করে এটি করতে পারি।

এটা কিভাবে করবেন:

HTML মার্কআপ

আপনার প্রিয় সম্পাদকে নিম্নলিখিত HTML কোড যোগ করুন (অনলাইনের জন্য আমি CodePen সুপারিশ করি।

<div class="invisible-box">Yay you can see me!</div>

CSS স্টাইলিং

আপনার স্টাইলশীটে নিম্নলিখিত CSS যোগ করুন:

.invisible-box {
  opacity: 0;
  transition: all 500ms;
  padding: 32px;
  margin-top: 32px;
  margin-bottom: 32px;
  background-color: #cf4b32;
  color: #fff;
  text-align: center;
}

.opacity-1 {
  opacity: 1;
}

লক্ষ্য করুন যে .invisible-box ক্লাসে opacity: 0; আছে যার মানে এটি ডিফল্টরূপে লুকানো। ঠিক নীচে আমাদের একটি ইউটিলিটি ক্লাস .opacity-1 আছে যা আমরা জাভাস্ক্রিপ্টের সাথে আবার এলিমেন্ট দেখানোর জন্য ব্যবহার করব।

জাভাস্ক্রিপ্ট মাউসেন্টার ইভেন্ট

আপনার JS স্ক্রিপ্টে নিম্নলিখিত কোড যোগ করুন:

let invisibleBox = document.querySelector(".invisible-box")

function addFullOpacity() {
  invisibleBox.classList.add("opacity-1")
}

invisibleBox.addEventListener("mouseenter", addFullOpacity)

কিভাবে জাভাস্ক্রিপ্ট কোড কাজ করে

প্রথমে আমরা querySelector() ব্যবহার করি খুঁজে পেতে এবং .invisible-box ধরতে . তারপরে আমরা এটিকে একটি মানানসই নামের একটি ভেরিয়েবলের সাথে বরাদ্দ করি:invisibleBox .
তারপর আমরা একটি ফাংশন ঘোষণা সেট আপ করি এবং এটির একটি নাম দিন addFullOpacity() . এর শরীরের ভিতরে {..} আমরা একটি বিবৃতি যোগ করি .
বিবৃতিটি classList প্রপার্টির add() সংযুক্ত করে আমাদের অদৃশ্য বাক্সে পদ্ধতি — এবং opacity-1 যোগ করে আমাদের অদৃশ্য বক্স উপাদানের ক্লাস।
অবশেষে, আমরা addEventListener() সেট আপ করেছি এবং এটি দুটি যুক্তি দিতে. প্রথম আর্গুমেন্ট mouseenter-এর জন্য শোনে ঘটনা দ্বিতীয় যুক্তি হল addFullOpacity() কল করা ফাংশনটি আমরা উপরে তৈরি করেছি (যখন এটি একটি মাউসেন্টার ইভেন্ট নিবন্ধন করে)।

মাউসেন্টার বনাম মাউসওভার?

আপনি সম্ভবত লক্ষ্য করেছেন যে মাউসওভার নামে একটি ইভেন্টের ধরনও রয়েছে৷ — এটা কিভাবে মাউসেন্টার? থেকে আলাদা

প্রধান পার্থক্য হল:

মাউসওভার ব্যবহারকারীর মাউস যখনই অভিভাবক উপাদান বা তার শিশু উপাদানের উপর দিয়ে চলে তখনই ইভেন্টটি ট্রিগার করে। আপনি যদি পিছনে এবং চতুর্থ উপাদানগুলি চালিয়ে যান তবে এটি ট্রিগার হতে থাকে — যা ব্যয়বহুল, কর্মক্ষমতা অনুসারে হতে পারে।
মাউসেন্টার ইভেন্টটি শুধু ট্রিগার করে যখন মাউস টার্গেট প্যারেন্ট এলিমেন্টে প্রবেশ করে - এটি তার বাচ্চাদের সম্পর্কে চিন্তা করে না। :-(

আপনি মাউসওভার ব্যবহার করতে চান আপনার যদি এমন একটি ওয়েব কম্পোনেন্ট থাকে যাতে বিভিন্ন বৈশিষ্ট্য থাকে যা ব্যবহারকারীদের সাথে ইন্টারঅ্যাক্ট করার সময় আপনি ভিন্নভাবে আচরণ করতে চান। অন্যথায় মাউসেন্টার এ লেগে থাকুন যেহেতু এটা পারফরম্যান্সের জন্য ভালো।

সম্পদ

সমস্ত কোড সহ CodePen।
MDN ওয়েব ডক্স মাউসেন্টার