क्या मैं एक सीएसएस को अक्षम कर सकता हूं: जावास्क्रिप्ट के माध्यम से होवर प्रभाव?

99

मैं ब्राउज़र :hoverको सीएसएस के प्रभाव का उपयोग करने से रोकने की कोशिश कर रहा हूं , जावास्क्रिप्ट के माध्यम से।

मैंने अपने CSS में aऔर a:hoverशैलियों को सेट किया है , क्योंकि मैं एक hover प्रभाव चाहता हूं, अगर JS उपलब्ध नहीं है। लेकिन अगर जे एस है उपलब्ध है, मैं के साथ मेरी CSS होवर प्रभाव अधिलेखित करना चाहते हैं एक चिकनी एक (jQuery रंग उदाहरण के लिए प्लगइन का उपयोग कर।)

मैंने यह कोशिश की:

$("ul#mainFilter a").hover(
     function(e){ e.preventDefault(); ...do my stuff... }, 
     function(e){ e.preventDefault(); ...do my stuff... });

मैंने इसके साथ प्रयास भी किया return false;, लेकिन यह काम नहीं करता है।

यहाँ मेरी समस्या का एक उदाहरण है: http://jsfiddle.net/4rEzz/ । लिंक को ग्रे होने के बिना बस फीका होना चाहिए।

जैसा कि fudgey द्वारा उल्लेख किया गया है, वर्कअराउंड का उपयोग करके होवर शैलियों को रीसेट करना होगा, .css()लेकिन मुझे सीएसएस में निर्दिष्ट हर एक संपत्ति को अधिलेखित करना होगा (यहां देखें: http://jsfiddle.net/raPeX/1/ )। मैं एक सामान्य समाधान ढूंढ रहा हूं।

क्या किसी को भी यह करना आता है?

पुनश्च: मैं हर शैली को हॉवर के लिए निर्धारित नहीं करना चाहता।

javascript jquery css

— Meo
स्रोत

136

शुद्ध जावास्क्रिप्ट सामान्य समाधान नहीं है, मुझे डर है। जावास्क्रिप्ट सीएसएस :hoverस्थिति को स्वयं बंद करने में सक्षम नहीं है।

आप हालांकि निम्नलिखित वैकल्पिक वैकल्पिक प्रयास कर सकते हैं। यदि आप अपने HTML और CSS के बारे में थोड़ा सा भी विचार नहीं करते हैं, तो यह आपको जावास्क्रिप्ट के माध्यम से मैन्युअल रूप से प्रत्येक CSS संपत्ति को रीसेट करने में बचाता है।

एचटीएमएल

<body class="nojQuery">

सीएसएस

/* Limit the hover styles in your CSS so that they only apply when the nojQuery 
class is present */

body.nojQuery ul#mainFilter a:hover {
    /* CSS-only hover styles go here */
}

जावास्क्रिप्ट

// When jQuery kicks in, remove the nojQuery class from the <body> element, thus
// making the CSS hover styles disappear.

$(function(){}
    $('body').removeClass('nojQuery');
)

— पॉल डी। वेटे
स्रोत

5

मुझे यह समाधान नॉटस्क्रिप्ट समाधान से बेहतर लगता है क्योंकि यह तब काम करता है जब CSS पूरी तरह से बाहरी फाइलों में समाहित होती है, और यह पेज लोड के दौरान भी काम करता है, अगर CSS पहले लोड होता है लेकिन JS बाद तक लोड नहीं होता है। "उत्तरोत्तर वृद्धि" करने के लिए jQuery का उपयोग करने से अक्सर उन पृष्ठों में परिणाम होता है जो आपके द्वारा लोड किए जाने से पहले सामान पर क्लिक करने पर अच्छी तरह से काम नहीं करते हैं। एक तेज़ लिंक पर एक तेज़ ब्राउज़र के साथ भी मैं इसे बहुत देखता हूँ।

— श्री शाइनी और न्यू 安 Sh

@श्री। चमकदार और नया: मैं सहमत हूं, मुझे अपने समाधान से भी बेहतर यह पसंद है! मुझे यकीन नहीं है कि मैंने इससे पहले एक की शान क्यों नहीं देखी ...

— जोश

3

"मुझे यह समाधान नोसस्क्रिप्ट समाधान से बेहतर लगता है क्योंकि यह तब काम करता है जब CSS पूरी तरह से बाहरी फ़ाइलों में समाहित होता है" - तो यह <noscript>समाधान करता है । आप सिर्फ <link>टैग के <noscript>बजाय अपने अंदर <style>टैग लगाते हैं। मेरा समाधान आपको कई फ़ाइलों के बजाय एक स्टाइलशीट फ़ाइल के अंदर सब कुछ रखने की अनुमति देता है।

— पॉल डी। वेट

इसके बिल्कुल नहीं मैं क्या देख रहा था, लेकिन मुझे लगता है कि यह समाधान सबसे अच्छा समझौता है! आप सभी को Thx

— मेयो 10'10

आप एक ही शैली को एक अलग नाम से भी कॉपी कर सकते हैं और jquery का उपयोग करके उस वर्ग के साथ सभी तत्वों का चयन कर सकते हैं और कक्षा को हटा सकते हैं और कॉपी कक्षा के साथ बदल सकते हैं।

— chepe263

14

एक दूसरे वर्ग का उपयोग करें जिसमें केवल होवर को सौंपा गया है:

एचटीएमएल

 <a class="myclass myclass_hover" href="#">My anchor</a>

सीएसएस

 .myclass { 
   /* all anchor styles */
 }
 .myclass_hover:hover {
   /* example color */
   color:#00A;
 }

अब आप वर्ग को हटाने के लिए Jquery का उपयोग कर सकते हैं, उदाहरण के लिए यदि तत्व पर क्लिक किया गया है:

jQuery

 $('.myclass').click( function(e) {
    e.preventDefault();
    $(this).removeClass('myclass_hover');
 });

आशा है कि यह उत्तर सहायक है।

— काई नैक
स्रोत

3

प्लस 1. यह रूढ़िवादी नहीं है, लेकिन समस्या को काफी उदात्त तरीके से क्रैक करता है।

— जिम टोलन

11

आप जावास्क्रिप्ट के साथ खुद को स्टाइलशीट और स्टाइलशीट नियमों में हेरफेर कर सकते हैं

var sheetCount = document.styleSheets.length;
var lastSheet = document.styleSheets[sheetCount-1];
var ruleCount;
if (lastSheet.cssRules) { // Firefox uses 'cssRules'
    ruleCount = lastSheet.cssRules.length;
}
else if (lastSheet.rules) { / /IE uses 'rules'
    ruleCount = lastSheet.rules.length;
}
var newRule = "a:hover { text-decoration: none !important; color: #000 !important; }";
// insert as the last rule in the last sheet so it
// overrides (not overwrites) previous definitions
lastSheet.insertRule(newRule, ruleCount);

विशेषताएँ बनाना! महत्वपूर्ण है और इसे बहुत ही अंतिम सीएसएस परिभाषा किसी भी पिछली परिभाषा को ओवरराइड करना चाहिए, जब तक कि कोई विशेष रूप से लक्षित न हो। आपको उस मामले में और नियम डालने पड़ सकते हैं।

— स्टीफन पी
स्रोत

1

या आप एक स्टाइलशीट में सभी नॉटस्क्रिप्ट नियमों को रख सकते हैं और फिर जावास्क्रिप्ट से स्टाइलशीट को अक्षम कर सकते हैं।

— सीन होगन

2

या अपने noscript स्टाइलशीट <link>टैग को किसी <noscript>तत्व के अंदर रखें ? यह काम करेगा, है ना?

— पॉल डी। वेट

1

या "अपमानजनक" नियम को हटाएं: developer.mozilla.org/en/DOM/stylesheet.deleteRule

— RoToRa

1

यहां तक कि IE5 भी कर सकते हैं। यह विधि अलग तरीके से कहा जाता है, लेकिन यह काम करना चाहिए: msdn.microsoft.com/en-us/library/ms531195%28v=vs.85%29.aspx । मैंने अन्य ब्राउज़रों की जाँच नहीं की है, लेकिन मुझे लगता है कि सभी आधुनिक ब्राउज़र मानक लागू करेंगे।

— RoToRa

फ़ायरफ़ॉक्स में मुझे मिलता हैError: The operation is insecure.

— एलेक्स डब्ल्यू

11

यह सेप्टिक के उत्तर के समान है, लेकिन इस दृष्टिकोण के बारे में क्या? सीएसएस कोड को लपेटें जिसे आप <noscript>टैग में जावास्क्रिप्ट का उपयोग करके अक्षम करना चाहते हैं । इस तरह यदि javaScript बंद है, तो CSS :hoverका उपयोग किया जाएगा, अन्यथा जावास्क्रिप्ट प्रभाव का उपयोग किया जाएगा।

उदाहरण:

<noscript>
<style type="text/css">
ul#mainFilter a:hover {
  /* some CSS attributes here */
}
</style>
</noscript>
<script type="text/javascript">
$("ul#mainFilter a").hover(
     function(o){ /* ...do your stuff... */ }, 
     function(o){ /* ...do your stuff... */ });
</script>

— जोश
स्रोत

4

मैंने not()CSS ऑपरेटर और jQuery के addClass()फ़ंक्शन का उपयोग किया। यहाँ एक उदाहरण है, जब आप किसी सूची आइटम पर क्लिक करते हैं, तो यह अब और नहीं चलेगा:

उदाहरण के लिए:

एचटीएमएल

<ul class="vegies">
    <li>Onion</li>
    <li>Potato</li>
    <li>Lettuce</li>
<ul>

सीएसएस

.vegies li:not(.no-hover):hover { color: blue; }

jQuery

$('.vegies li').click( function(){
    $(this).addClass('no-hover');
});

— ColdTuna
स्रोत

3

मैं: लिंक की उपस्थिति को बदलने से हॉवर घटना को रोकने के लिए सीएसएस का उपयोग करूंगा।

a{
  font:normal 12px/15px arial,verdana,sans-serif;
  color:#000;
  text-decoration:none;
}

इस सरल सीएसएस का मतलब है कि लिंक हमेशा काले और रेखांकित नहीं होंगे। मैं इस सवाल से नहीं कह सकता कि क्या उपस्थिति में परिवर्तन केवल एक चीज है जिसे आप नियंत्रित करना चाहते हैं।

— क्रिस्टोफर ऑल्टमैन
स्रोत

यदि जेएस ग्राहक के लिए उपलब्ध नहीं है तो इसका अच्छा: एक होवर प्रभाव है। लेकिन अगर यह मैं इसे अधिलेखित करने की आवश्यकता है। मैंने अपनी css में a: hover class सेट की है, बस इसे निष्क्रिय करना चाहता हूँ।

— मेयो

@meo: आप CSS psuedo कक्षाओं को अक्षम नहीं कर सकते, लेकिन आप सभी लिंक शैलियों को समान रूप या पैरामीटर के लिए सेट करके इसे ओवरराइड कर सकते हैं। यह उत्तर और मेरा उत्तर दोनों अलग-अलग तरीकों से ऐसा करते हैं।

— मॉटी

3

जब आप उस उपकरण को स्पर्श का समर्थन करते हैं, तो मैं सभी :hoverसंपत्तियों को बदलने की सलाह :activeदूंगा। जब आप ऐसा करते हैं तो बस इस फ़ंक्शन को कॉल करें touch()।

function touch() {
  if ('ontouchstart' in document.documentElement) {
    for (var sheetI = document.styleSheets.length - 1; sheetI >= 0; sheetI--) {
      var sheet = document.styleSheets[sheetI];
      if (sheet.cssRules) {
        for (var ruleI = sheet.cssRules.length - 1; ruleI >= 0; ruleI--) {
          var rule = sheet.cssRules[ruleI];

          if (rule.selectorText) {
            rule.selectorText = rule.selectorText.replace(':hover', ':active');
          }
        }
      }
    }
  }
}

— शोभित शर्मा
स्रोत

मेरे लिए महान काम करता है। धन्यवाद!

— उलटा

1

लिंक रंग सेट करने का प्रयास करें:

$("ul#mainFilter a").css('color','#000');

संपादित करें: या बेहतर अभी तक, CSS का उपयोग करें, जैसा कि क्रिस्टोफर ने सुझाव दिया था

— Mottie
स्रोत

jsfiddle.net/raPeX मैंने एक उदाहरण बनाया है। यह काम करता है लेकिन ऐसा करने के लिए अपनी तरह का बेवकूफ। मुझे हर सीएसएस मूल्य को पुनः प्राप्त करना होगा और उन्हें शैली के रूप में जोड़ना होगा? इसके लिए अवश्य ही एक बेहतर तरीका होना चाहिए। ' मैं ऐसा नहीं करना चाहता। लेकिन के लिए संकेत +1

— Meo

हाय मेयो, नहीं नहीं, ऊपर मेरा कोड एक विशिष्ट लिंक को लक्षित कर रहा था जैसा कि मैंने सोचा था कि आप चाहते थे। आप इसे केवल उपयोग aकरने के बजाय इसे सामान्य कर सकते हैं ul#mainFilter aयदि आपका मतलब है, या आप कह रहे हैं कि पृष्ठ पर हर लिंक एक अलग रंग है?

— मॉटी

मैंने आपका डेमो अपडेट किया है, टिप्पणियों के साथ, आपको दिखाने के लिए कि मेरा क्या मतलब है: jsfiddle.net/raPeX/2

— Mottie

ive मिला कि पहले से ही धन्यवाद। लेकिन समस्या यह है कि मेरे होवर पर सिर्फ रंग बदलता नहीं है, कभी-कभी इसकी पृष्ठभूमि, सीमा, कभी-कभी रेखा-ऊँचाई भी। यही कारण है कि मेरे लिए सिर्फ हॉवर को रोकना आसान होगा, हर एक हॉवर प्रभाव को अधिलेखित करने से इनकार करना।

— मेयो

इस विचार के लिए आंशिक पैच: आप css एक नियम बना सकते हैं जो उस के लिए चयन करता है a.jsOverride:hoverजो css विशेषताओं के सभी को ओवरराइड करता है , इसलिए js को jsOverrideपृष्ठ लोड होने पर सभी लिंक में केवल उस वर्ग को जोड़ना होगा ...

— सकल

1

वास्तव में इसे हल करने का एक अन्य तरीका सीएसएस के साथ ओवरराइटिंग हो सकता है insertRule।

यह एक मौजूदा / नई स्टाइलशीट में सीएसएस नियमों को इंजेक्ट करने की क्षमता देता है। मेरे ठोस उदाहरण में यह इस तरह दिखेगा:

//creates a new `style` element in the document
var sheet = (function(){
  var style = document.createElement("style");
  // WebKit hack :(
  style.appendChild(document.createTextNode(""));
  // Add the <style> element to the page
  document.head.appendChild(style);
  return style.sheet;
})();

//add the actual rules to it
sheet.insertRule(
 "ul#mainFilter a:hover { color: #0000EE }" , 0
);

मेरे 4 साल पुराने मूल उदाहरण के साथ डेमो: http://jsfiddle.net/raPeX/21/

— Meo
स्रोत