2016-12-04 7 views
5

से रोकें, मैं अभी इस स्थिति में आया हूं जहां एक अतिप्रवाह तत्व का छुपा क्षेत्र अभी भी माउस क्लिक या माउस होवर से प्रभावित है।छिपे हुए क्षेत्र को छिपाने वाले क्षेत्र को क्लिक करने योग्य

मैंने सोचा कि एक अदृश्य तत्व या क्षेत्र माउस घटनाओं द्वारा लक्षित नहीं किया जाएगा, तो, मैं यहां क्या खो रहा हूं?

एक उदाहरण का पालन करता है जहां यह व्यवहार पॉप अप हो जाता है, केवल एक को सर्कल के बाहर माउस को हॉवर स्क्वायर के पास घुमाया जाता है और आप ध्यान देंगे: होवर चयनकर्ता प्रभाव ले रहा है।

#circle { 
 
    position:absolute; 
 
    height: 50%; 
 
    width: 28%; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    background: black; 
 
    color: white; 
 
    border-radius: 200px; 
 
    overflow: hidden; 
 
    
 
} 
 

 
#square { 
 
    height: 50%; 
 
    width: 50%; 
 
    transform: translate(-50%, -50%); 
 
    background: green; 
 
    cursor: pointer; 
 

 
} 
 

 
#square:hover { 
 
    background: yellow; 
 
}
<body> 
 
    <div id="circle"> 
 
    <div id="square"></div> 
 
    </div> 
 
    
 
    </div>

जोड़ा गया 2016/12/05 पर: के रूप में फ़ायरफ़ॉक्स में टिप्पणी में कहा विपरीत क्रोम के लिए होता है यह अजीब व्यवहार नहीं होती है।

चीयर्स, utxeee।

+0

आप इसे किस ब्राउज़र पर देख रहे हैं? फ़ायरफ़ॉक्स 50.0.1 पर सब कुछ अपेक्षित काम करता प्रतीत होता है। – Rounin

+1

ईमानदार होने के लिए, मैं यह उल्लेख करना भूल जाता हूं कि मैंने फ़ायरफ़ॉक्स (48.0.2) पर भी इसका परीक्षण किया और मैं पुष्टि करता हूं कि यह वहां अपेक्षित काम करता है। मैं अभी क्रोम (संस्करण 49.0.2623.112) का उपयोग कर रहा हूं। – utxeee

+0

यह स्पष्ट रूप से ब्लिंक रेंडरिंग इंजन के साथ एक बग है, हालांकि मैं यह नहीं समझ सकता कि यह कहां से आ रहा है। मैंने 'सूचक-घटनाओं को जोड़ने की कोशिश की: कोई नहीं;' 'सर्कल 'और' पॉइंटर-इवेंट्स: ऑटो; 'से' # वर्ग', लेकिन इससे कोई फर्क नहीं पड़ता। – Rounin

उत्तर

0

डब्ल्यू 3 विनिर्देश अतिप्रवाह के अनुसार: छिपा हुआ और बॉर्डर-त्रिज्या शो काम:

5,3। कॉर्नर क्लिपिंग

एक बॉक्स की पृष्ठभूमि, लेकिन इसकी सीमा-छवि नहीं, उचित वक्र (जैसा कि 'पृष्ठभूमि-क्लिप' द्वारा निर्धारित किया गया है) पर फिसल गया है। अन्य प्रभाव जो सीमा या पैडिंग एज पर क्लिप (जैसे 'ओवरफ्लो' 'दृश्यमान' के अलावा) को भी वक्र पर क्लिप करना होगा। प्रतिस्थापित तत्वों की सामग्री हमेशा सामग्री किनारे वक्र पर छंटनी की जाती है। इसके अलावा, सीमा किनारे के वक्र के बाहर क्षेत्र तत्व की ओर से पर माउस ईवेंट स्वीकार नहीं करता है।

लेकिन यह नहीं (वेबकिट बग की तरह लगता है)। समाधानों में से एक के रूप में आप clip-path property (वर्तमान में आईई को छोड़कर सभी प्रमुख ब्राउज़रों द्वारा समर्थित) का उपयोग कर सकते हैं:

clip-path: inset(0 0 0 0 round 200px); 
-webkit-clip-path: inset(0 0 0 0 round 200px); 
+0

हाय @ एवाडॉन, यह व्यवहार ब्लिंक> हिटटेस्टिंग घटक के साथ एक बग है। वैसे भी, आपकी मदद के लिए धन्यवाद;) – utxeee

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