सीएसएस को अक्षम करना:तत्वों पर होवर प्रभाव:एक व्यावहारिक मार्गदर्शिका

<पी> :होवरको हटाना प्रभाव का मतलब है कि जब कोई उपयोगकर्ता किसी तत्व पर मंडराता है तो उसे अपना स्वरूप बदलने से रोकना होता है। यदि होवर प्रभाव अनावश्यक है, ध्यान भटकाता है, या आपके पृष्ठ के डिज़ाइन के साथ फिट नहीं बैठता है, तो आपको ऐसा करने की आवश्यकता हो सकती है।

सीएसएस हटाने के तरीके:होवर व्यवहार

<पी> :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

के साथ ओवरराइडिंग <पी> !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() स्यूडो-क्लास

का उपयोग करना <पी> :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.

निष्कर्ष

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

<पी>

सीएसएस को अक्षम करना:तत्वों पर होवर प्रभाव:एक व्यावहारिक मार्गदर्शिका