2011-07-26 11 views
10

मैं इस Example of a Venn Diagramसीएसएस वेन आरेख माउस मंडराना

कहाँ चक्र माउस हॉवर पर प्रकाश डाला जाता है की तरह एक शुद्ध सीएसएस वेन आरेख बनाने के लिए कोशिश कर रहा हूँ। लेकिन समस्या यह है कि border-radius प्रॉपर्टी का उपयोग करके यदि मैं सर्कल के कोने (सर्कल के बाहर) पर माउस करता हूं, तो यह होवर ट्रिगर करता है।

एक डेमो के लिए

this jsfiddle link देख सकते हैं और लाल क्षेत्र

इस से बचने के लिए किसी भी सीएसएस हल है पर ले जाएं, या मैं कर रहा हूँ गन्न जावास्क्रिप्ट का उपयोग कर इसे गणना करने के लिए है?

संपादित करें: प्रतिक्रियाओं के लिए सभी को धन्यवाद। मुझे ब्राउज़र की जानकारी भी पोस्ट करनी चाहिए थी। मैं क्रोम 12 का उपयोग कर रहा हूं अब तक ऐसा लगता है कि यह बग क्रोम में मौजूद है। मैं इस पृष्ठ को किसी और निष्कर्ष के साथ अपडेट करूंगा।

अगस्त 2013 को अपडेट करें: बस क्रोम 28 पर फिर से इसका परीक्षण किया गया और समस्या अब मौजूद नहीं है।

+0

मुझे कोई समस्या नहीं लगती है। यह केवल हाइलाइट करता है अगर मैं सर्कल पर ही होवर करता हूं। – Devin

+0

यह काम करता है क्योंकि आप इसे एफएफ 5.0 में उम्मीद करते हैं। आप कौन सा ब्राउज़र उपयोग कर रहे हैं? –

+0

एफएफ 5। क्या कोई निश्चित ब्राउज़र है जिसके साथ आपको कोई समस्या है? – Devin

उत्तर

6

मुझे पता है कि यह संभव हैborder-radius:50% के साथ मंडलियों को आकर्षित करने के लिए, लेकिन यह वास्तव में हैक का थोड़ा सा है। और यह IE8 या निचले स्तर पर काम नहीं करता है, CSS3pie की तरह, और भी हैक्स का उपयोग किए बिना।

इसलिए जब मैं स्वीकार करता हूं कि आपने अपने बेवकूफ़ उदाहरण में एक अच्छा दिखने वाला वेन आरेख बनाया है, तो मुझे नहीं लगता कि यह करने का यह सबसे अच्छा तरीका है।

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

कैनवास के लिए, आप इस पुस्तकालय की कोशिश कर सकते: http://www.canvasxpress.org/venn.html

एसवीजी के लिए, मैं Raphael की सिफारिश करेंगे, जो कोड के बारे में चार लाइनों में मंडराना करने योग्य वेन आरेख का उत्पादन करेगा।

मुझे पता है कि न तो कैनवास और न ही एसवीजी IE8 द्वारा समर्थित हैं, लेकिन फिर न तो border-radius है, इसलिए मुझे लगता है कि यह आपके लिए मानदंड नहीं है।

किसी भी मामले में, राफेल वास्तव में आईई के सभी संस्करणों में काम करता है, क्योंकि यह ब्राउज़र का पता लगाता है और यदि यह आईई में चल रहा है तो एसवीजी के बजाय वीएमएल प्रस्तुत करता है। यदि आपको वास्तव में इसकी आवश्यकता है तो कैनवास समर्थन को पुराने आईईएस में भी हैक किया जा सकता है।

संबंधित मुद्दे