सीएसएस पिछले भाई का चयन करें

Question

मेरे पास एक प्रगति पट्टी है जिसमें दो बच्चे हैं (भागों)। जब भी इन बच्चों में से प्रत्येक प्रगति की कुल ऊंचाई को ढंकता है और उसके बच्चे बदल जाएंगे। मैंने next sibling selector का उपयोग कर पहले बच्चों के लिए हल करने में कामयाब रहा है लेकिन मुझे दूसरे बच्चों (पीले हिस्से) के लिए समाधान नहीं मिल रहा है। अब तक मैंने इसे jQuery का उपयोग करके हल किया है लेकिन मैं इसे शुद्ध सीएसएस में करना चाहता हूं।

बेला: https://jsfiddle.net/zfh263r6/5/

$('#start').on({ 
 
    mouseenter: function() { 
 
\t //$(this).css('height', '4px'); 
 
     //$('progress').css('height', '4px'); 
 
    }, 
 
    mouseleave: function() { 
 
\t //$(this).css('height', ''); 
 
    // $('progress').css('height', ''); 
 
    } 
 
});

#progress_wrap { 
 
    position: relative; 
 
    height: 4px; /*max height of progress*/ 
 
    background: #f3f3f3; 
 
} 
 

 
progress { 
 
    appearance: none; 
 
    -moz-appearance: none; 
 
    -webkit-appearance: none; 
 
    width: 100%; 
 
    border:none; 
 
    height: 2px; 
 
    transition:all .25s ease-in; 
 
    cursor: pointer; 
 
    background-color: #fff; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    display: block; 
 
} 
 

 
progress:hover, progress:hover + #start {height: 4px} 
 

 
progress[value] { 
 
    /* Reset the default appearance */ 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    \t appearance: none; 
 

 
    /* Get rid of default border in Firefox. */ 
 
    border: none; 
 

 
    /* For IE10 */ 
 
    color: #f8008c; 
 
} 
 

 
progress[value]::-webkit-progress-bar { 
 
    background-color: #fff; 
 
    border:none; 
 
} 
 

 
progress[value]::-webkit-progress-value {background:#f8008c} 
 

 
progress::-ms-progress-value {background:#f8008c} 
 

 
progress::-moz-progress-bar {background:#f8008c} 
 

 
progress::-ms-fill {border: none} 
 

 
#start { 
 
    height: 2px; 
 
    transition: all .25s ease-in; 
 
    cursor: pointer; 
 
    background-color: #ffe232; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0px; 
 
    width: 30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="progress_wrap"> 
 
    <progress min="0" max="1" value="0.66" id="progress"></progress> 
 
    <div id="start" style="display: inline-block; left: 50px;"></div> 
 
</div>

Answer 1

कोई सीएसएस पिछले एक भाई चयनकर्ता नहीं है, लेकिन आप ~ का भी उपयोग करेंगे -

मान लीजिए कि आप लिंक की एक सूची है और चलो जब एक पर होवर करते हैं, तो सभी पिछले लोगों को लाल होना चाहिए। आप इसे इस तरह कर सकते हैं:

/* default link color is blue */ 
 
.parent a { 
 
    color: blue; 
 
} 
 

 
/* prev siblings should be red */ 
 
.parent:hover a { 
 
    color: red; 
 
} 
 
.parent a:hover, 
 
.parent a:hover ~ a { 
 
    color: blue; 
 
}

<div class="parent"> 
 
    <a href="#">link</a> 
 
    <a href="#">link</a> 
 
    <a href="#">link</a> 
 
    <a href="#">link</a> 
 
    <a href="#">link</a> 
 
</div>

**** courtesy- @mantish ****

Answer 2

टिप्पणी से

:

progress और start मंडराना ऊंचाई बनाने और उसके बाद progress_wrap ओवरफ़्लो बनाएं: छुपाएं और छोटा करें और बनाएं होवर पर विस्तार करें।

आसपास के अन्य तत्वों को धक्का देने से बचने के लिए, हम एक ही समय में कुछ नकारात्मक नीचे मार्जिन जोड़ सकते हैं।

#progress_wrap { 
    position: relative; 
    height: 2px; 
    background: #f3f3f3; 
    overflow:hidden; 
    transition: all .25s ease-in; 
} 

#progress_wrap:hover, progress:hover + #start { 
    height: 4px; 
    margin-bottom:-2px; 
} 

progress,#start { 
    height: 4px; /*This is a change from existing, not a new declaration*/ 
} 

https://jsfiddle.net/5t90s4jk/