JavaScript-এ মাউস এন্টার করলে এলিমেন্ট শো করার পদ্ধতি

মান লইয়া আপনার একটি ইনভিজিবল এলিমেন্ট আছে (যেমন একটি একশন বার/মেনু) যা আপনি শো করতে চান যখন ইউজারের মাউস সেটির এলাকায় ঢুকবে। আমরা এটা করতে পারি JavaScript mouseenter ইভেন্ট সেট আপ করে।

কীভাবে করবেন:

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 আছে যা আমরা JavaScript-এ এলিমেন্ট আবার শো করতে ব্যবহার করব।

JavaScript mouseenter ইভেন্ট

আপনার JS স্ক্রিপ্টে নিচের কোডটি যোগ করুন:

let invisibleBox = document.querySelector(".invisible-box") function addFullOpacity() { invisibleBox.classList.add("opacity-1") } invisibleBox.addEventListener("mouseenter", addFullOpacity)

JavaScript কোডটি কীভাবে কাজ করে

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

mouseenter বনাম mouseover?

আপনি লক্ষ্য করেছেন হতে পারে একটি ইভেন্ট টাইপ আছে mouseover — এটি mouseenter-এর থেকে কীভাবে ভিন্ন?

মূল পার্থক্য হলো:

• mouseover ইভেন্ট ট্রিগার হয় প্রতি বার ইউজারের মাউস পেরেন্ট এলিমেন্ট বা এর চাইল্ড এলিমেন্টগুলোর ওপর থেকে মুভ করলে। এটি ট্রিগার होते থাকে যদি আপনি এলিমেন্টগুলোর মাঝপথে आगे পেছনে মুভ করেন — যা পারফরম্যান্স-ওয়াইজ এক্সপেনসিভ হতে পারে।
• mouseenter ইভেন্ট শুধু তখন ট্রিগার হয় যখন মাউস টার্গেট পেরেন্ট এলিমেন্টে এন্টার করে — এটিকে এর চাইল্ডগুলোর চিন্তা নেই। :-(

আপনি mouseover ব্যবহার করবেন যদি আপনার একটি ওয়েব কম্পোনেন্ট থাকে যেটিতে বিভিন্ন ফিচার আছে যেগুলো আপনি চান ভিন্নভাবে behave করবে যখন ইউজাররা সেগুলোর সাথে ইন্টারঅ্যাক্ট করবে। অন্যথায় mouseenter-এ টিকে থাকুন কারণ এটি পারফরম্যান্সের জন্য ভালো।

রিসোর্স

• CodePen with all the code.
• MDN Web Docs mouseenter