निकालें ': होवर' सीएसएस व्यवहार तत्व से

Question

मेरे पास सीएसएस है जो किसी तत्व पर होवर करते समय स्वरूपण को बदलता है।

HTML:

<div class="test"> blah </div>

सीएसएस:

.test:hover {  border: 1px solid red; }

कुछ मामलों में मैं hover पर CSS लागू नहीं करना चाहता। एक तरीका सिर्फ jQuery का उपयोग करके सीएसएस वर्ग को डिव से हटाने का होगा, लेकिन यह अन्य चीजों को तोड़ देगा क्योंकि मैं भी अपने बच्चे के तत्वों को प्रारूपित करने के लिए उस क्लास का उपयोग कर रहा हूं।

तो इससे मुझे सवाल उठने लगा: क्या किसी तत्व से 'होवर' सीएसएस स्टाइल को हटाने का कोई तरीका है?

Answer 1

मैं दो वर्गों का उपयोग करूंगा। अपनी परीक्षा की कक्षा रखें और टेस्टहॉवर नामक एक दूसरी कक्षा जोड़ें, जिसे आप केवल उन लोगों के साथ जोड़ते हैं जिन्हें आप चाहते हैं - परीक्षण वर्ग के साथ। यह सीधे नहीं है जो आपने पूछा था, लेकिन अधिक संदर्भ के बिना यह सबसे अच्छा समाधान की तरह लगता है और संभवतः इसे करने का सबसे साफ और सरल तरीका है।

उदाहरण:

.test {  border: 0px; }
.testhover:hover {  border: 1px solid red; }

<div class="test"> blah </div>
<div class="test"> blah </div>
<div class="test testhover"> blah </div>

Answer 2

इसे करने के लिए एक विधि है:

pointer-events:none;

उस तत्व पर जिसे आप होवर को अक्षम करना चाहते हैं।

(ध्यान दें: यह उस तत्व पर जावास्क्रिप्ट ईवेंट को भी अक्षम करता है, क्लिक इवेंट वास्तव में पीछे के तत्व के माध्यम से गिर जाएगा)।

ब्राउज़र का समर्थन (अगस्त २०१२०१ ९ के रूप में ९ ०.४ ९%)

यह बहुत क्लीनर लगता है

/**
* This allows you to disable hover events for any elements
*/
.disabled {
  pointer-events: none;  /**<-----------*/
  opacity: 0.2;
}

.button {
  border-radius: 30px;
  padding: 10px 15px;
  border: 2px solid #000;
  color: #FFF;
  background: #2D2D2D;
  text-shadow: 1px 1px 0px #000;
  cursor: pointer;
  display: inline-block;
  margin: 10px;
}

.button-red:hover {
  background: red;
}

.button-green:hover {
  background:green;  
}

<div class="button button-red">Im a red button hover over me</div>

<br/>

<div class="button button-green">Im a green button hover over me</div>

<br/>

<div class="button button-red disabled">Im a disabled red button</div>

<br/>

<div class="button button-green disabled">Im a disabled green button</div>

Comments

अच्छा जवाब, यह केवल IE <11 पर असमर्थित है, इसलिए किसी भी समस्या का इतना अधिक नहीं।

— ओलिवियर - इंटरफेसेस

यह उत्तर बहुत साफ है और वास्तव में मैं क्या देख रहा था। मैंने इसे पहले भी इस्तेमाल किया है, लेकिन यह अभी भी मेरे लिए नया है, इसलिए मैं अक्सर इसके बारे में भूल जाता हूं।

— निकोरेलियस

बिल्कुल सही मुझे क्या चाहिए: D

— Alizoh

सूचक घटनाओं के लिए अपवोट करें। यही मैंने खोजा था।

— गरवानी

@ बॉडमैन पॉइंटर-इवेंट: कोई नहीं; ऑन-हॉवर पृष्ठभूमि परिवर्तन को हटा दिया गया, लेकिन मेरे तत्व से हाइपरलिंक को भी अक्षम कर दिया गया। हॉवर प्रभाव को कैसे हटाएं लेकिन हाइपरलिंक को बनाए रखें?

— बायोडेवलपर्स

Answer 3

:notउन वर्गों को बाहर करने के लिए छद्म-वर्ग का उपयोग करें जिन्हें आप नहीं चाहते कि मंडराना:

बेला

<div class="test"> blah </div>
<div class="test"> blah </div>
<div class="test nohover"> blah </div>

.test:not(.nohover):hover {  
    border: 1px solid red; 
}

यह वह है जो आप एक सीएसएस नियम में चाहते हैं!

Comments

निश्चित रूप से सबसे अच्छा विलेय! कम कोड और हर ब्राउज़र में अच्छा काम करता है।

— बेन बेसुइजेन

इसने मेरे लिए काम किया लेकिन मुझे एक बदलाव करना पड़ा, इससे पहले एक स्पेस :hover। यह इसलिए हो सकता है क्योंकि मैं SASS का उपयोग कर रहा हूं, निश्चित नहीं।

— नर्सरी गुट

धन्यवाद, मैंने अपने ऐप में टच डिवाइस के लिए कस्टम बटन पर किसी भी होवर के प्रभाव को अक्षम करने के लिए touchDeviceकक्षा में जोड़कर bodyऔर अपने सीएसएस नियमों को कुछ इस तरह से बदल दियाbody:not(.touchDevice) .button:hover { ... }

— अलेक्जेंडर

हां, यह समाधान बहुत बेहतर है।

— Tsurule Vol

Answer 4

नया .css वर्ग जोड़ें:

#test.nohover:hover { border: 0 }

तथा

<div id="test" class="nohover">blah</div>

अधिक "विशिष्ट" सीएसएस नियम जीतता है, इसलिए यह सीमा: 0 संस्करण सामान्य रूप से निर्दिष्ट एक को ओवरराइड करेगा।

Comments

यह। और यह डिफॉल्ट लुक को भी ओवरराइड करेगा, जो अलग है। तो हमेशा एक ब्राउज़र होगा जिसमें होवर दिखाई देगा।

— मातरिनस

Answer 5

मुझे भी यह समस्या थी, मेरे समाधान में एक तत्व के ऊपर एक तत्व था जिस पर मैं एक हॉवर प्रभाव नहीं चाहता:

.no-hover {
  position: relative;
  opacity: 0.65 !important;
  display: inline-block;
}

.no-hover::before {
  content: '';
  background-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 60;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<button class="btn btn-primary">hover</button>
<span class="no-hover">
  <button class="btn btn-primary ">no hover</button>
</span>

Comments

दिलचस्प समाधान।

— बोडमैन

Answer 6

आप चयनकर्ता रखना चाहते हैं, इसलिए इसे जोड़ना / हटाना काम नहीं करेगा। एक कठिन और तेज़ सीएसएस चयनकर्ताओं (या दो) को लिखने के बजाय, शायद आप मूल चयनकर्ता का उपयोग कुछ मानदंडों के आधार पर उस तत्व में नए सीएसएस नियम को लागू करने के लिए कर सकते हैं:

$(".test").hover(
  if(some evaluation) {
    $(this).css('border':0);
  }
);