बैकग्राउंड-रंग के लिए सीएसएस होवर चयनकर्ता jquery

Question

के साथ पृष्ठभूमि रंग के गतिशील परिवर्तन के बाद काम नहीं कर रहा है। मैं jquery .css() विधि के साथ एक div के पृष्ठभूमि रंग को गतिशील रूप से बदलता हूं। मैं एक ही div पर एक सीएसएस hover चयनकर्ता चाहता हूं जो पृष्ठभूमि रंग को बदलता है। ऐसा लगता है कि रंग jquery के साथ बदलने से पहले, सीएसएस hover चयनकर्ता काम करता है, लेकिन jquery विधि के साथ div बदल जाता है, सीएसएस hover चयनकर्ता अब काम नहीं करता है। क्या इसके आसपास काम करने का कोई तरीका है (jquery hover विधि का उपयोग किए बिना)?

इस का एक उदाहरण है कि मैं क्या बारे में बात कर रहा हूँ: http://jsfiddle.net/KVmCt/1/

Answer 1

आ रही समस्या का

सीएसएस जानकारी के स्थान का महत्व है:

बाहरी शैलीपत्रक दस्तावेज़ के शीर्ष में सीएसएस द्वारा बिना खारिज कर दिया है; जो बदले में, style तत्व में विशेषता के सीएसएस द्वारा अत्यधिक शासन किया गया है। मूल रूप से ब्राउजर द्वारा सामना की जाने वाली आखिरी शैली किसी भी पूर्व निर्दिष्ट, और अन्यथा विरोधाभासी, नियमों को ओवरराइड करती है (जब तक कि !important का कीवर्ड उपयोग नहीं किया जाता है)।

जावास्क्रिप्ट के रूप में, और इसलिए jQuery, इन-लाइन style तत्व इस हमेशा परस्पर विरोधी शैलियों ओवरराइड कहीं और निर्दिष्ट की विशेषता में अपने सीएसएस/स्टाइल जानकारी देता है।

div के लिए color: red पर शैलियों को अनदेखा करते हुए स्थान अधिक महत्व देते हैं।

यह हल करने के लिए, आप का उपयोग कर सकते हैं:

div:hover { 
    background-color: blue!important; 
} 

JS Fiddle demo।

div { 
    background-color: red; 
} 

div:hover { 
    background-color: blue!important; 
} 

वैकल्पिक रूप से, आप jQuery के hover() विधि इस्तेमाल कर सकते हैं:

$('div').css('background-color','red').hover(
    function(){ 
     $(this).css('background-color','blue'); 
    }, 
    function(){ 
     $(this).css('background-color','red'); 
    }); 

एक बेहतर समाधान है, हालांकि, background-color jQuery के साथ/अन्य शैलियों बताए से बचने के लिए, और बस का उपयोग सीएसएस है JS Fiddle demo।

Answer 2

आप jQuery के साथ इनलाइन यह कहते हैं और एक स्टाइलशीट में किसी भी सीएसएस जोड़ सकते हैं और एक वर्ग है कि बदलता है दूर करने के लिए jQuery का उपयोग करके देखें ओवरराइड करता है सीएसएस हेरफेर जब होवर पर रंग। http://jsfiddle.net/KVmCt/6/

jQuery इस तरह दिखता है:: यहाँ काम कर रहे बेला है

$("div").hover(
function(){ 
$(this).addClass("blue"); 
} 
, 
function(){ 
$(this).removeClass("blue"); 
}); 

Answer 3

jQuery css विधि अपने तत्वों, कि यह क्रियान्वित करने के बाद, अपने div

<div style="background-color: red">Hello world</div>` 

की तरह दिखाई देगा जिसका अर्थ है करने के लिए एक इनलाइन शैली कहते हैं

अब, इनलाइन स्टाइलिंग हमेशा सीएसएस स्टाइल की तुलना में अधिक प्राथमिकता है, इसलिए आपकी समस्या है।

तो, इनलाइन स्टाइल का उपयोग करने के बजाय सीएसएस कक्षा क्यों नहीं जोड़ रहे हैं? निम्नलिखित के साथ प्रयास करें:

$("div").addClass("edited"); 

और

div:hover, div.edited:hover { 
    background-color: blue; 
} 

div.edited { 
    background-color: red; 
} 

और आप यह काम करता है देखेंगे।

Answer 4

आपके सीएसएस में महत्वपूर्ण टैग जोड़ने का एक आसान तरीका होगा।

div:hover { 
    background-color: blue !important; 
}; 

Answer 5

आप उपयोग कर सकते हैं अगर आप सिर्फ इनलाइन शैली हटाने की आवश्यकता

$("#yourselector").attr("style", " "); 

यह style=" "