jquery - Resetting the .style of an element / reverting to 'initial' without .style overriding -

मेरे पास एक div ( .projectTitle ) दूसरे div ( .projectcontenter < / code>)। जब स्क्रीन 1000px चौड़ी से अधिक है, .projectTitle को अस्पष्टता: 0; के साथ आरंभ किया गया है। जब स्क्रीन 1000px चौड़ाई से कम है, तो इसे अस्पष्टता: 1; के साथ आरंभ किया जाता है। देखें:

<पूर्व> @ मीडिया (न्यूनतम-चौड़ाई: 1000px) {.projectTitle {अस्पष्टता: 0; }} @ मीडिया (अधिकतम-चौड़ाई: 1000px) {.projectTitle {अस्पष्टता: 1; }}

अब, अगर .projectcontainer को स्क्रीन पर 1000px से अधिक व्यापक है, तो .projectTitle की अस्पष्टता को चेतन करना चाहिए 1 तक, और वापस 0 जब अनर्जुज्ड हालांकि, अगर स्क्रीन 1000 पीएक्स से कम है, तब कुछ भी नहीं होना चाहिए; यह इस मामले में हमेशा 1 पर रहेगा।

मेरे पास एक वैरिएबल ( windowState ) है जो स्क्रीन की चौड़ाई के आधार पर बदलता है:

इससे कम 1000px, windowState = 3

1000Px से अधिक, windowState = 2

मेरे पास एक jQuery इवेंट है जो मँडरा को संभालने के लिए इस तरह दिखता है, जो इसे ठीक से काम करता है:

  $ ("। ProjectContainerr")। होवर (फ़ंक्शन () {if (windowState! = 3) {$ ('। ProjectTitle', यह) .मेट ({अस्पष्टता: 1}, 100);} }, फ़ंक्शन () {if (windowState! = 3) {$ ('। ProjectTitle', यह)। मान ({अस्पष्टता: "प्रारंभिक"}, 100);}});  

समस्या

जब अस्पष्टता को प्रारंभिक (उर्फ, मीडिया प्रश्नों में परिभाषित मान) के मूल्य पर रीसेट कर दिया जाता है , यह मान इस तथ्य से ओवरराइड हो जाता है कि यह पहले से 1 पर सेट हो गया था होवरिंग से "1" मान तत्व की शैली में रखा गया है, सीएसएस से विरासत में मिली मान को ओवरराइड कर रहा है जिसे 'प्रारंभिक' ने इसे वापस कर दिया है।

मैं इस मूल्य को ओवरराइड / रीसेट करने से कैसे रोकूं तत्व की शैली का उपयोग किए बिना?

आप इसे jQuery के बजाय css3 संक्रमण का उपयोग क्यों नहीं करते

  @ मीडिया (न्यूनतम-चौड़ाई: 1000px) {.projectcontainer: hover .ProjectTitle {opacity: 1; संक्रमण: अस्पष्टता 1 एस आसानी से आउट; -मोझ-संक्रमण: अस्पष्टता 1s आसानी-इन-आउट; -विबकिट-संक्रमण: अस्पष्टता 1 एस आसानी-इन-आउट; } .projectTitle {अस्पष्टता: 0; }} @ मीडिया (अधिकतम-चौड़ाई: 1000px) {.projectTitle {अस्पष्टता: 1; }}  

यहां एक

है