CSS :hover इफेक्ट्स को एलिमेंट्स पर अक्षम करना: एक व्यावहारिक गाइड

:hover प्रभाव को हटाने का मतलब है किसी एलिमेंट को यूजर के उस पर होवर करने पर उसकी उपस्थिति बदलने से रोकना। आपको ऐसा करने की आवश्यकता हो सकती है यदि होवर प्रभाव अनावश्यक, विचलित करने वाला है, या आपके पेज के डिज़ाइन के साथ फिट नहीं बैठता।

CSS :hover व्यवहार हटाने के तरीके

क्लीन, सुसंगत स्टाइलिंग बनाए रखते हुए एलिमेंट्स से :hover प्रभाव को अक्षम करने के कई प्रभावी तरीके हैं।

विधि 1: 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">होवर सक्रिय</button>
<button class="button no-hover">होवर अक्षम</button>
</body>
</html>

पहला बटन होवर पर गहरे नीले रंग में बदलता है, जबकि दूसरा बटन अपरिवर्तित रहता है और क्लिक नहीं किया जा सकता।

विधि 2: !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>
<body>
<button class="button">सामान्य होवर</button>
<button class="button override-hover">ओवरराइड होवर</button>
</body>
</html>

पहला बटन होवर पर गहरा होता है, जबकि दूसरा बटन !important ओवरराइड के कारण अपना मूल हरा रंग बनाए रखता है।

विधि 3: :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">होवर सक्षम</button>
<button class="button no-hover">होवर अक्षम</button>
</body>
</html>

पहला बटन होवर पर नीले बैकग्राउंड से भर जाता है, जबकि no-hover क्लास वाला दूसरा बटन अपरिवर्तित रहता है।

विधि 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">सक्रिय बटन</button>
<button class="button disabled">अक्षम बटन</button>
</body>
</html>

पहला बटन होवर पर गहरा होता है, जबकि अक्षम बटन कम अपारदर्शिता के साथ ग्रे दिखाई देता है और "नॉट-अलाउड" कर्सर दिखाता है।

निष्कर्ष

ये विधियाँ CSS होवर प्रभावों को हटाने के लिए लचीले समाधान प्रदान करती हैं। पूर्ण इंटरैक्शन ब्लॉकिंग के लिए pointer-events: none, स्टाइल ओवरराइड के लिए !important, चयनात्मक एप्लिकेशन के लिए :not(), या सिमेंटिक निष्क्रिय स्टेट्स के लिए डिसेबल्ड क्लास का उपयोग करें।