CSSを選択前の兄弟

Question

私は2つの子供（部分）を持っている進行状況バーがあります。これらの子どものそれぞれがぶらされるたびに、進歩とその子どもの全高が変わるでしょう。私はnext sibling selectorを使って最初の子供のために解決することができたが、私は2番目の子供（黄色の部分）のための解決策を見つけることができない。これまでjQueryを使って解決しましたが、私は純粋なCSSでこれをしたいと思います。

フィドル：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

ませCSS前の兄弟セレクタを持っていませんが、あなたは~セレクタを使用することができます -

のは、あなたがリンクのリストを持っていると言ってみましょうをホバリングすると、前のものはすべて赤くなるはずです。あなたはこのようにそれを行うことができます。

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