html - How to inverse hover a hotspotted image? -
मेरे पास एक hotspotted छवि है जैसा कि निम्न है:
& lt; div class = "hotspotted" & gt; & Lt; आईएमजी ऊंचाई = "100%" चौड़ाई = "100%" src = "पहेली_होस्स्पॉट.png" / & gt; & Lt; a href = "a.html" id = "hotspot1" वर्ग = "हॉटस्पॉट" & gt; & lt; / a & gt; & Lt; a href = "b.html" id = "hotspot2" वर्ग = "हॉटस्पॉट" & gt; & lt; / a & gt; & Lt; / div & gt; मुझे वह पसंद है, जब मैं हॉटस्पॉट 1 पर फ़िसल जाता हूं, तो बाकी सभी पेज अंधेरे होते हैं I मैं इसे कैसे प्राप्त करूं?
मैंने उन पंक्तियों के साथ कुछ सोचा (लेकिन उन पंक्तियां कुछ भी नहीं):
.hotspot {display: block; स्थिति: पूर्ण; }। Hotspotted: एक {अस्पष्टता: 0.8; }। Hotspotted a: होवर {अस्पष्टता: 0; }
CSS3 समाधान
यह स्पष्ट है कि आप चाहते हैं उनमें से "ओवरले" के बजाय तत्वों के अस्पष्टता स्तर को नियंत्रित करें यह थोड़ा मुश्किल था, लेकिन मैं CSS3 के सक्षम ब्राउज़रों (आईई 9, एफएफ, क्रोम में परीक्षण) के लिए मिला एक समाधान है। निम्नलिखित का उपयोग करें (निश्चित रूप से, अस्पष्टता स्तर जिसे आप चाहते हैं, इसे बदला जा सकता है): । हॉटस्पॉटेड & gt; आईएमजी,। हॉटस्पॉट & gt; आईएमजी ~ एक {अस्पष्टता: 0.2; / * एक हॉटस्पॉट होवरिंग करते समय "पृष्ठ" की "डिफ़ॉल्ट" अस्पष्टता। / Hotspotted: not (: hover) & gt; Img, .hotspotted: not (: hover) & gt; A, .hotspotted & gt; आईएमजी: होवर,। हॉटस्पॉटेड & gt; आईएमजी: होवर ~ ए,। हॉटस्पॉट & gt; आईएमजी ~ ए: होवर {अस्पष्टता: 1; / * सामान्य प्रदर्शन अस्पष्टता और hovered हॉटस्पॉट के * /} स्पष्टीकरण
अस्पष्टता: 0.2 के साथ पहले दो चयनकर्ता सेट हैं इसे .hotspotted के अंदर सभी तत्वों के लिए "डिफ़ॉल्ट" अस्पष्टता बना दें। उसके बाद, यह डिफ़ॉल्ट अगले पांच कारकों द्वारा ओवरराइड हो जाता है पहले दो ... । Hotspotted: not (: hover) & gt; Img, .hotspotted: not (: hover) & gt; एक ... सुनिश्चित करें कि जब आप वेब पेज पर नहीं बोलते हैं कि सब कुछ ठोस है अगले दो ...
। Hotspotted & gt; आईएमजी: होवर,। हॉटस्पॉटेड & gt; Img: hover ~ a ... सुनिश्चित करें कि जब आप वेबपृष्ठ में माउसओवर करते हैं, लेकिन एक हॉटस्पॉट पर नहीं करते हैं, तो यह सब कुछ अभी भी ठोस रहता है। फिर अंतिम एक ... .hotspotted & gt; आईएमजी ~ ए: होवर ... हॉटस्पॉट को इसके होवर पर ठोस रखता है, लेकिन फिर पहले दो "टेकओवर" से "डिफ़ॉल्ट" की अनुमति देता है और अन्य सभी तत्वों में फीका .hotspotted कंटेनर।
Comments
Post a Comment