:hover ইফেক্ট রিমুভ করার মানে হলো একটি এলিমেন্টকে ব্যবহারকারী হোভার করলে এর চেহারা পরিবর্তন হতে থামানো। আপনাকে এটি করতে হতে পারে যদি হোভার ইফেক্ট অপ্রয়োজনীয়, দৃষ্টিভ্রামক, বা আপনার পেজের ডিজাইন সাথে মেলে না।
CSS :hover বিহেভিয়ার রিমুভ করার পদ্ধতিগুলো
ক্লিন, কনসিস্টেন্ট স্টাইলিং বজায় রেখে এলিমেন্ট থেকে :hover ইফেক্ট ডিজেবল করার বেশ কিছু কার্যকর উপায় রয়েছে।
পদ্ধতি ১: pointer-events: none ব্যবহার করে
pointer-events: none প্রপার্টি সব মাউস ইন্টারঅ্যাকশন ডিজেবল করে, হোভার ইফেক্টসহ। এটি এলিমেন্টকে পয়েন্টার ইভেন্টের प्रति প্রতিক্রিয়া জানাতে বাধা দেয়।
<!DOCTYPE html> <html> <head> <style> .button { background-color: #007bff; padding: 10px 20px; color: white; cursor: pointer; border: none; border-radius: 4px; margin: 5px; } .button:hover { background-color: #0056b3; } .no-hover { pointer-events: none; } </style> </head> <body> <button class="button">Hover Active</button> <button class="button no-hover">Hover Disabled</button> </body> </html>
প্রথম বাটন হোভার করলে ডার্ক ব্লু হয়, দ্বিতীয় বাটন অপরিবর্তিত থাকে এবং ক্লিক করা যাবে না।
পদ্ধতি ২: !important দিয়ে ওভাররাইড করা
হোভার সময় মূল স্টাইলগুলো একটিভ রাখতে বাধ্য করতে !important ডিক্লেরেশন ব্যবহার করুন।
<!DOCTYPE html> <html> <head> <style> .button { padding: 10px 20px; background-color: #28a745; color: white; border: none; border-radius: 4px; margin: 5px; cursor: pointer; } .button:hover { background-color: #218838; } .override-hover:hover { background-color: #28a745 !important; } </style> </head> <body> <button class="button">Normal Hover</button> <button class="button override-hover">Override Hover</button> </body> </html>
প্রথম বাটন হোভার করলে ডার্ক হয়, দ্বিতীয় বাটন !important ওভাররাইডের কারণে তার মূল গ্রিন রঙ বজায় রাখে।
পদ্ধতি ৩: :not() সিউডো-ক্লাস ব্যবহার করে
একটি নির্দিষ্ট ক্লাস ছাড়া সব এলিমেন্টে হোভার ইফেক্ট প্রয়োগ করতে :not() সিলেক্টর ব্যবহার করুন।
<!DOCTYPE html> <html> <head> <style> .button { padding: 10px 20px; background-color: white; color: #3498db; border: 2px solid #3498db; border-radius: 4px; margin: 5px; cursor: pointer; } .button:not(.no-hover):hover { background-color: #3498db; color: white; } </style> </head> <body> <button class="button">Hover Enabled</button> <button class="button no-hover">Hover Disabled</button> </body> </html>
প্রথম বাটন হোভার করলে ব্লু ব্যাকগ্রাউন্ডে ফিল হয়, দ্বিতীয় বাটন no-hover ক্লাসের কারণে অপরিবর্তিত থাকে।
পদ্ধতি ৪: ডিজেবলড স্টেট তৈরি করা
একটি ডিজেবলড ক্লাস ইমপ্লিমেন্ট করুন যা ভিজ্যুয়ালি ইন্ডিকেট করে এলিমেন্টটি নিষ্ক্রিয় এবং হোভার ইফেক্ট রিমুভ করে।
<!DOCTYPE html> <html> <head> <style> .button { padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 4px; margin: 5px; cursor: pointer; } .button:hover { background-color: #0056b3; } .disabled { background-color: #6c757d; opacity: 0.6; cursor: not-allowed; } .disabled:hover { background-color: #6c757d; } </style> </head> <body> <button class="button">Active Button</button> <button class="button disabled">Disabled Button</button> </body> </html>
প্রথম বাটন হোভার করলে ডার্ক হয়, ডিজেবলড বাটন গ্রে-আউটেড দেখায় কম করা opacity এবং "not-allowed" কার্সর দেখায়।
উপসংহার
এই পদ্ধতিগুলো CSS হোভার ইফেক্ট রিমুভ করার ফ্লেক্সিবল সমাধান প্রদান করে। সম্পূর্ণ ইন্টারঅ্যাকশন ব্লক করার জন্য pointer-events: none, স্টাইল ওভাররাইডের জন্য !important, সিলেক্টিভ অ্যাপ্লিকেশনের জন্য :not(), বা সিম্যান্টিক ইনएक্টিভ স্টেটের জন্য ডিজেবলড ক্লাস ব্যবহার করুন।
