मैं हूवर प्रभाव पर अपने तत्व में सीमा संपत्ति जोड़ने की कोशिश कर रहा हूं। और मुझे कुछ समस्या का सामना करना पड़ा।

यहाँ मेरी डिफ़ॉल्ट स्थिति है http://prntscr.com/93dvjx

मेरे पास क्या है है

http://prntscr.com/93dwj9

जब मैंने अपने <i> तत्व को प्राप्त किया, तो सीएसएस ने इसमें सीमा संपत्ति जोड़ दी। लेकिन इसने तत्व की स्थिति को बदल दिया, इसलिए यह थोड़ा नीचे और दाएं चलता है।

यहां <i> CSS संपत्तियों पर मंडराना है:

  border: 3px solid rgba(0,0,0,0.3);
  background-color: rgba(255,255,255,1);

मुझे क्या चाहिए

जब मैं तत्व को प्राप्त करता हूं, तो वह बाहर की सीमा के साथ ही उस पर स्थित रहता है। यह करने के लिए सबसे अच्छा तरीका क्या है?

पी.एस

मैंने पहली बार सीमा पर पारदर्शी संपत्ति लागू करने की कोशिश की, लेकिन इससे मुझे मदद नहीं मिली, क्योंकि इसने तत्व की चौड़ाई और ऊँचाई को बदल दिया। http://prntscr.com/93dz61 और मैं तत्व के छोटे होने की जरूरत है, जब यह मंडराना नहीं है http://prntscr.com/93e06t

css
-1
volodymyr3131 16 नवम्बर 2015, 17:06

3 जवाब

सबसे बढ़िया उत्तर

आप box-sizing CSS प्रॉपर्टी पर एक नज़र डालना चाह सकते हैं।

वास्तविक कोड के बिना, यह निर्धारित करना कठिन है कि क्या हो रहा है, लेकिन मुझे संदेह है कि आपका box-sizing border-box पर सेट नहीं है।

वह संपत्ति तत्व की चौड़ाई और ऊंचाई की गणना करते समय सीमा को शामिल करने के लिए प्रदान की गई बताती है, इसे अतिरिक्त स्थान के रूप में जोड़ने के बजाय।

इसे अपनी स्टाइलशीट में जोड़ने और चौड़ाई / ऊँचाई को समायोजित करने का प्रयास करें। आपको वह मिल सकता है जिसकी आपको आवश्यकता है।

2
Matheus208 16 नवम्बर 2015, 14:11

स्थिति बदल जाती है, इसलिए इसे वापस बदल दें :)

 border: 3px solid rgba(0,0,0,0.3);
 background-color: rgba(255,255,255,1);
 margin-left: -2px;
 margin-top: -2px;

मुझे नहीं पता कि यह सबसे अच्छा तरीका है और इसमें कुछ बदलावों की आवश्यकता हो सकती है लेकिन यह काम कर सकता है।

0
Lidaranis 16 नवम्बर 2015, 14:15

यह आपकी मदद कर सकता है

i
{
border:3px solid transparent;
box-sizing:border-box;
    }

i:hover{
 border: 3px solid rgba(0,0,0,0.3);
  background-color: rgba(255,255,255,1);
}
0
Shantanu Verma 16 नवम्बर 2015, 17:38