सवाल सीएसएस होवर सीमा इनलाइन तत्वों को थोड़ा समायोजित करती है


मेरे पास एक अनियंत्रित सूची पूर्ण या एंकर है। मेरे पास एक सीएसएस है: होवर इवेंट जो इसके लिए सीमाएं जोड़ता है लेकिन बाईं ओर सभी एंकर थोड़ा समायोजित करते हैं जब मैं होवर करता हूं क्योंकि यह चौड़ाई और ऑटो एडजस्टिंग में 1px जोड़ रहा है। मैं कैसे सुनिश्चित कर सकता हूं कि स्थिति पूर्ण है?

मैंने जेएस फिल्ड बनाया यहाँ


44
2017-12-24 17:00


मूल


सीमाओं की गणना के लिए सीमाएं गिनती हैं, इसलिए यदि आप 1px सीमा जोड़ते हैं, तो आपको क्षतिपूर्ति के लिए ऊंचाई / चौड़ाई को 1px से कम करना होगा। - Marc B


जवाब:


जब सीमा दिखाई देती है तो आप "कूदने" से बचने के लिए गैर-होवर राज्य में एक पारदर्शी सीमा जोड़ सकते हैं:

http://jsfiddle.net/TEUhM/3/

#homeheader a:visited, #homeheader a{
    border:1px solid transparent;
}

77
2017-12-24 17:06



मैं दुर्घटना से इस पर आया और आश्चर्यचकित था कि किसी ने पृष्ठभूमि-क्लिप शामिल नहीं किया था: पैडिंग-बॉक्स; सीमा के साथ: 1 पीएक्स ठोस पारदर्शी; सीएसएस। इस मुद्दे को संबोधित करते समय दोनों प्रविष्टियों को शामिल करने के लिए मेरे लिए जरूरी लगता है। - Borgboy
एफवाईआई: (यदि किसी को भी एक ही समस्या का सामना करना पड़ रहा है,) एक पारदर्शी पृष्ठभूमि को मेरे बूटस्ट्रैप नेविगेशन गोलियों पर अलग तरीके से व्यवहार किया जाता है (जहां सक्रिय नेवी गोली में एक अलग फ़ॉन्ट रंग और पृष्ठभूमि रंग होता है)। आरजीबीए का उपयोग मेरे लिए काम किया: border: 1px solid rgba(0, 0, 0, 0);जहां अंतिम 0 पारदर्शिता के लिए है। - Anupam


आप भी उपयोग कर सकते हैं outline, जो चौड़ाई को प्रभावित नहीं करेगा, इसलिए कोई "कूद" प्रभाव नहीं। हालांकि, दुर्भाग्य से, आप एक रूपरेखा गोल नहीं कर सकते हैं।


12
2017-12-24 17:22





1px का मार्जिन जोड़ें और उस मार्जिन को होवर पर हटा दें, इसलिए इसे सीमा से बदल दिया गया है।

http://jsfiddle.net/TEUhM/4/


7
2017-12-24 17:05



अच्छा आपका धन्यवाद। मुझे डर था कि मुझे जेएस का उपयोग करना पड़ सकता है :)! - user1082764
सौभाग्य से यह शायद ही कभी जरूरी है। और यह आपको उपयुक्त बनाता है कि आप कोशिश नहीं करते हैं। :) - GolezTrol


आप इस प्रकार की कार्यक्षमता के लिए सीमा के बजाए एक बॉक्स छाया का उपयोग कर सकते हैं।

यह काम करता है क्योंकि आपकी छाया 'डीओएम में आकार नहीं लेती' है, और इसलिए सीमा के विपरीत स्थिति को प्रभावित नहीं करेगा।

एक घोषणा का उपयोग करने का प्रयास करें

box-shadow:0 0 1px 1px #102447;

आपके बजाए

border:1px solid #102447;

अपने होवर राज्य पर।

नीचे कार्रवाई में इसका एक त्वरित डेमो है:

डेमो

#homeheader a:visited,
#homeheader a {
  text-decoration: none;
  color: black;
  margin-right: 5px;
}
#homeheader a:hover {
  background-color: #D0DDF2;
  border-radius: 5px;
  box-shadow: 0 0 1px #102447;
}
#homeheader li {
  padding: 0;
  margin: 0px 10px;
  display: inline;
  font-size: 1em;
}
<div id="homecontainer">
  <div id="homeheader">
    <ul>
      <li><a href="#">this</a>
      </li>
      <li><a href="#">that</a>
      </li>
      <li><a href="#">this again</a>
      </li>
      <li><a href="#">that again</a>
      </li>
    </ul>
  </div>
</div>


7
2018-04-14 15:02





आप बॉक्स-छाया का उपयोग कर सकते हैं जो सीमा के विपरीत, आपके बॉक्स आकार को नहीं बदलता है।

यहां एक छोटा ट्यूटोरियल है।


3
2017-10-23 16:36





बस अपनी सीएसएस फ़ाइल में निम्नलिखित कोड जोड़ें

#homeheader a {
    border:1px solid transparent;
}

3
2018-06-12 21:20





सीएसएस "बॉक्स आकार" विशेषता मेरे लिए इस समस्या को ठीक किया। यदि आप अपना तत्व देते हैं

.class-name {
    box-sizing: border-box; 
}

फिर सीमा की चौड़ाई को जोड़ा जाता है के भीतर जब ब्राउज़र इसकी चौड़ाई की गणना करता है तो बॉक्स का। इस तरह जब आप सीमा शैली को चालू और बंद करते हैं, तो तत्व का आकार बदलता नहीं है (जो कि आपके द्वारा देखी गई झटके का कारण बनता है)।

यह एक नई तकनीक है, लेकिन सीमा-बक्से के लिए समर्थन बहुत सुसंगत है। यहां है डेमो!


2
2018-01-12 19:33



  यह अब तक का सबसे सुंदर समाधान है। - gion_13


क्षतिपूर्ति करने के लिए होवर पर नकारात्मक मार्जिन जोड़ें:

#homeheader a:hover{
    border: 1px solid #102447;
    margin: -1px;
}

अद्यतन पहेली

पहेली में margin: -1px; थोड़ा और जटिल है क्योंकि वहां एक था margin-right ओवरराइड हो रहा है, लेकिन यह अभी भी नव-कब्जे वाले स्थान को घटाने का मामला है।


1
2017-10-23 08:16





मैंने पाया सबसे आसान तरीका 'सीमा' के बजाय 'रूपरेखा' का उपयोग कर रहा था।

#home:hover{
outline:1px solid white;
}

के बजाय

#home:hover{
border:1px solid white;
}

सबसे अच्छा काम करता है!

https://www.kirupa.com/html5/display_an_outline_instead_of_a_border_hover.htm


1
2018-05-05 20:16



यह काम करता है, लेकिन जब यह साथ प्रयोग किया जाता है तो यह गोलाकार किनारों को अनदेखा करता है border-radius। - byxor


लंबे समय तक दबाव लेने के बाद मुझे एक अच्छा समाधान मिला। उम्मीद है कि यह दूसरों की मदद करेगा।

folloing कोड जोड़ने पर:

एचटीएमएल

<div class="border-test">
  <h2> title </h2>
  <p> Technology founders churn rate niche market </p>
</div>

सीएसएस

.border-test {
  outline: 1px solid red;
  border: 5px solid transparent;
}
.border-test:hover {
  outline: 0px solid transparent;
  border: 5px solid red;
}

लाइव जांचें: लाइव डेमो

उम्मीद है कि यह मदद करेगा।


1
2017-10-03 09:19



traparent मेरे लिए एक टाइपो की तरह लगता है - byxor
इसकी टाइपिंग इसकी पारदर्शी गलती है। - Sword I