क्या आप "अदृश्य सीमा" बना सकते हैं?

Question

मैं एक अभ्यास के रूप में make a navbar करने की कोशिश कर रहा हूं।

मैं a:hover का उपयोग कर रहा हूं ताकि बटन के चारों ओर एक ठोस सीमा शामिल हो सके। हालांकि, यह सभी अन्य बटन सीमा के आकार से आगे बढ़ता है।

इस समस्या का उचित समाधान क्या है? मुझे पता है कि अन्य लोग हैं (चर्चा here), मैंने विशेष रूप से सीमा को बनाने की कोशिश की "अदृश्य होने के बावजूद भी अदृश्य हो जाएं"। मैंने border:transparent सेट किया है, उम्मीद है कि यह वही कर सकता है जो मैं चाहता हूं, लेकिन यह बिल्कुल जगह नहीं दिखाया।

मुझे पता है कि मैं पृष्ठभूमि के बराबर होने के लिए सीमा के रंग को चुन सकता हूं और इसे ठोस बना सकता हूं, लेकिन यह वही नहीं है जो मैं चाहता हूं। क्या इस मुद्दे को हल करने का कोई सौहार्दपूर्ण तरीका है?

Answer 1

के बारे में कैसे border: 10px solid transparent?

Answer 2

आपका सबसे अच्छा विकल्प आपके तत्व में पैडिंग या मार्जिन जोड़ना होगा जो सीमा के समान आकार है और सीमा को शून्य चौड़ाई बनाते हैं, और फिर सीमा दिखाएं और a:hover चयनकर्ता के साथ पैडिंग को हटा दें।

यहां एक नमूना है। आप अक्सर मार्जिन के साथ भी ऐसा कर सकते हैं।

a { 
 
    display: inline-block; 
 
    height: 2em; width: 100px; 
 
    padding: 2px; 
 
    background: #0ff; 
 
} 
 

 
a:hover { 
 
    padding: 0; 
 
    border :2px solid #000; 
 
}

<a href="#">Hello World</a>

Answer 3

आप अपने सीमा है, जो एक सीमा की तरह काम करता है, लेकिन आकार गणना में ध्यान में रखा नहीं है के बजाय outline सीएसएस संपत्ति इस्तेमाल कर सकते हैं।

हालांकि, इसमें कुछ समस्याएं हैं, not being supported by IEs 7 or earlier।

Answer 4

border:transparent मतलब है border: transparent 0 none

आप एक संपत्ति जब आशुलिपि सिंटैक्स का उपयोग तो आप डिफ़ॉल्ट में सभी गुण रीसेट निर्दिष्ट नहीं करते हैं।

आपको इसे सीमा-शैली और सीमा-चौड़ाई देने की आवश्यकता है।

Answer 5

एक कारण यह काम नहीं कर रहा है जैसा कि आप उम्मीद करेंगे क्योंकि आप केवल को :hover पर लागू कर रहे हैं, इसे बिना तत्व के लागू किया जाना चाहिए: होवर चयनकर्ता या आपको "स्थानांतरण" आयाम मिलेगा। इससे कोई फर्क नहीं पड़ता कि आप किस डिस्प्ले प्रकार का उपयोग करते हैं, आपको बस यह सुनिश्चित करना होगा कि वे वही हैं, और डिफ़ॉल्ट रूप से <a> इनलाइन है।

एक और कारण आपके शॉर्टेंड सीमाओं के साथ कुछ करने के लिए है, तो आपको none के बजाय solid जैसे पारदर्शी संस्करण के लिए सीमा प्रकार जोड़ने की आवश्यकता है।

आप जिस तकनीक का उपयोग कर रहे हैं वह पूरी तरह से कानूनी है, पैडिंग हैक या रूपरेखा (जो आयाम नहीं जोड़ती) के लिए कोई ज़रूरत नहीं है।

http://jsfiddle.net/Madmartigan/kwdDB/

इस प्रयास करें:

#wd-navbar li a { 
    border: medium solid transparent; 
    display: block; 
    margin: 1px; 
} 

#wd-navbar li a:hover { 
    background-color: #F5DEB3; 
    border: medium solid; 
} 

Answer 6

सीमा-रंग सेट करना: पारदर्शी; नौकरी करता है

a { 
    border-color : transparent ; 
} 

a:hover { 
    border-color : black; 
} 

Answer 7

उपयोग छद्म तत्वों ::after और ::before अदृश्य सीमाओं बनाएं करने के लिए।