'होवर' पर - विभिन्न परिदृश्यों पर बच्चों की सीमा-त्रिज्या को कैसे संभालें?

Question

मेरे पास माता-पिता हैं a तत्व। जब उपयोगकर्ता mouse over मैं बाल सीमा रंग को लाल रंग में बदल रहा हूं। यह काम करता हैं।

मेरी समस्या यह है कि बच्चे की लंबाई स्थिर नहीं है। यह गतिशील है। मैं बाएं-सीमा radius दोनों first और last जोड़ रहा हूं लेकिन right-radius को second और last पर कैसे जोड़ूं? (के बाद से मैं बच्चों की गिनती नहीं जानते)

.parent { 
 
    border:5px solid red; 
 
    display:inline-block; 
 
    position: relative; 
 
    border-radius:5px; 
 
    box-sizing:border-box; 
 
    margin-bottom:3em; 
 
} 
 

 
.parent a { 
 
    display:block; 
 
    padding:1em; 
 
    border-bottom:1px solid #ddd; 
 
    position: relative; 
 
    width:50%; 
 
    float:left; 
 
    box-sizing:border-box; 
 
} 
 

 
.parent a:nth-child(odd):hover{ 
 
    border:5px solid #ddd; 
 
    margin: -5px; 
 
} 
 

 
.parent a:nth-child(even):hover{ 
 
    border:5px solid #ddd; 
 
    margin: -5px; 
 
    left:10px; 
 
} 
 

 
.parent a:first-of-type{ 
 
    border-top-left-radius:5px; 
 
} 
 

 
.parent a:last-of-type{ 
 
    border-bottom-left-radius:5px; 
 
}

<div class="parent"> 
 
     <a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a> 
 
    </div> 
 
    
 
    <div class="parent"> 
 
     <a href="#">1</a><a href="#">2</a><a href="#">3</a> 
 
    </div> 
 
    
 
     <div class="parent"> 
 
     <a href="#">1</a> 
 
    </div>

या क्या इस संभाल करने के लिए सही तरीका क्या है?

Answer 1

आप निम्न और अपने सभी मामलों का उपयोग कर सकते अनुसार क्रमबद्ध किया जाना चाहिए: https://jsfiddle.net/67hr0oax/7/

: https://jsfiddle.net/67hr0oax/4

यहाँ से हटाया झटका से कुछ के साथ एक अद्यतन है:

.parent { 
    border:5px solid red; 
    display:inline-block; 
    position: relative; 
    border-radius:5px; 
    box-sizing:border-box; 
    margin-bottom:3em; 
} 

.parent a { 
    display:block; 
    padding:1em; 
    border-bottom:1px solid #ddd; 
    position: relative; 
    width:50%; 
    float:left; 
    box-sizing:border-box; 
} 

.parent a:nth-child(odd):hover{ 
    border:5px solid #ddd; 
    margin: -5px; 
} 

.parent a:nth-child(even):hover{ 
    border:5px solid #ddd; 
    margin: -5px; 
    left:10px; 
} 

.parent a:first-of-type{ 
    border-top-left-radius:5px; 
} 

.parent a:nth-child(2) { /* second child */ 
    border-top-right-radius:5px; 
} 

.parent a:last-of-type:nth-child(even){ 
    border-bottom-right-radius:5px; 
} 

.parent a:last-of-type:nth-child(odd){ 
    border-bottom-left-radius:5px; 
} 

.parent a:nth-last-child(2):nth-child(odd) { 
    border-bottom-left-radius: 5px; 
} 

यहाँ एक jsfiddle है

कृपया ध्यान दें: ब्राउज़र समर्थन केवल आईई 9 और ऊपर के लिए है।

Answer 2

जब आप कहते हैं कि आपकी पंक्ति में तत्वों की संख्या "गतिशील" है तो मुझे नहीं लगता कि सीएसएस इस तरह की जटिलता को संभालने के लिए डिज़ाइन किया गया है।

यदि आप स्थिर तत्वों की संख्या रखते हैं तो शायद हम सीमा त्रिज्या लागू करने के लिए :nth-last-child(), :nth-child() के संयोजन का उपयोग कर सकते हैं।

तो जाहिर है कि आपके विकल्प जावास्क्रिप्ट का उपयोग करके प्रसंस्करण तक ही सीमित हैं।

Answer 3

जब तक आप <a>&nbsp;</a> जोड़कर भी तत्वों की संख्या रखते हैं, यह काम करेगा।

हालांकि बाहरी सीमा में कुछ छड़ें रुकने के लिए थीं लेकिन वे माउस पर जब आप पूरे ब्लॉक कूदते हैं तो रोकने के लिए वहां हैं।

.parent, 
 
.parent a { 
 
    position: relative 
 
} 
 
.parent { 
 
    display: inline-block 
 
} 
 
.parent a { 
 
    display: block; 
 
    padding: 1em; 
 
    width: 50%; 
 
    float: left; 
 
    box-sizing: border-box; 
 
    border: 5px solid transparent; 
 
    background: #fff 
 
} 
 
.parent a:nth-child(1) { 
 
    border-top-left-radius: 5px; 
 
    border-top: solid red 5px 
 
} 
 
.parent a:nth-child(2) { 
 
    border-top-right-radius: 5px; 
 
    border-top: solid red 5px 
 
} 
 
.parent a:nth-child(even) { 
 
    border-right: solid red 5px 
 
} 
 
.parent a:nth-child(odd) { 
 
    border-left: solid red 5px 
 
} 
 
.parent a:last-child { 
 
    border-bottom-right-radius: 5px; 
 
    border-bottom: solid red 5px 
 
} 
 
.parent a:nth-last-child(2) { 
 
    border-bottom-left-radius: 5px; 
 
    border-bottom: solid red 5px 
 
} 
 
.single a { 
 
    border-radius: 5px; 
 
    border: 5px solid red 
 
} 
 
.parent a:hover { 
 
    border-color: #00f 
 
}

<div class="parent"> 
 
    <a href="#">1</a> 
 
    <a href="#">2</a> 
 
    <a href="#">3</a> 
 
    <a href="#">4</a> 
 
    <a href="#">5</a> 
 
    <a>&nbsp;</a> 
 
</div> 
 

 
<div class="parent"> 
 
    <a href="#">1</a> 
 
    <a href="#">2</a> 
 
    <a href="#">3</a> 
 
    <a>&nbsp;</a> 
 
</div> 
 

 
<div class="single parent"> 
 
    <a href="#">1</a> 
 
</div>