:হোভার সরানো হচ্ছে প্রভাব মানে একটি উপাদানকে তার চেহারা পরিবর্তন করা থেকে থামানো যখন একজন ব্যবহারকারী এটির উপর ঘোরাফেরা করে। হোভার প্রভাব অপ্রয়োজনীয়, বিভ্রান্তিকর বা আপনার পৃষ্ঠার ডিজাইনের সাথে মানানসই না হলে আপনাকে এটি করতে হতে পারে৷
সিএসএস সরানোর পদ্ধতি :হোভার আচরণ
:hover নিষ্ক্রিয় করার বেশ কয়েকটি কার্যকর উপায় রয়েছে৷ পরিষ্কার, সামঞ্জস্যপূর্ণ স্টাইলিং বজায় রাখার সময় উপাদান থেকে প্রভাব।
পদ্ধতি 1:পয়েন্টার-ইভেন্ট ব্যবহার করা:কোনোটিই নয়
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>
The first button changes to dark blue on hover, while the second button remains unchanged and cannot be clicked.
পদ্ধতি 2:!গুরুত্বপূর্ণ
দিয়ে ওভাররাইড করা
!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>
The first button darkens on hover, while the second button maintains its original green color due to the !important override.
পদ্ধতি 3::not() Pseudo-Class ব্যবহার করা
: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>
The first button fills with blue background on hover, while the second button with the no-hover class remains unchanged.
পদ্ধতি 4:একটি অক্ষম অবস্থা তৈরি করা
একটি অক্ষম শ্রেণি প্রয়োগ করুন যা দৃশ্যত উপাদানটি নিষ্ক্রিয় এবং হোভার প্রভাবগুলি সরিয়ে দেয়
<!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>
The first button darkens on hover, while the disabled button appears grayed out with reduced opacity and shows a "not-allowed" cursor.
উপসংহার
এই পদ্ধতিগুলি CSS হোভার প্রভাবগুলি অপসারণের জন্য নমনীয় সমাধান প্রদান করে। pointer-events: none ব্যবহার করুন সম্পূর্ণ মিথস্ক্রিয়া ব্লক করার জন্য, !important শৈলী ওভাররাইডের জন্য, :not() নির্বাচনী অ্যাপ্লিকেশনের জন্য, অথবা শব্দার্থিক নিষ্ক্রিয় অবস্থার জন্য অক্ষম ক্লাস।
