CSS wählen vorherige Geschwister

Question

Ich habe einen Fortschrittsbalken, der zwei Kinder (Teile) hat. Wenn jedes dieser Kinder schwebt, ändert sich die Gesamthöhe des Fortschritts und seiner Kinder. Ich habe es geschafft, die ersten Kinder mit der next sibling selector zu lösen, aber ich kann keine Lösung für die zweiten Kinder finden (der gelbe Teil). Bis jetzt habe ich das mit jQuery gelöst, aber ich möchte das in reinem CSS tun.

Geige: 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

No CSS keinen vorherigen Wähler Geschwister, aber sie ~ Selektor verwenden -

Angenommen, Sie haben eine Liste von Links haben und Wenn Sie auf einem stehen, sollten alle vorherigen rot werden. Sie können es wie folgt tun:

/* 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

Von Kommentar:

machen progress und start der Hover-height und dann machen progress_wrap Überlauf: versteckt und kürzer und machen , dass auf Hover erweitern.

Um zu vermeiden, dass andere Elemente herumgeschoben werden, können wir gleichzeitig einen negativen unteren Rand hinzufügen.

#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/