我有一个进度条,有两个孩子(部分)。每当这些孩子都徘徊时,进步及其子女的总高度就会发生变化。我已经设法使用next sibling selector
解决了第一个孩子,但我找不到第二个孩子(黄色部分)的解决方案。到目前为止,我已经使用jQuery解决了这个问题,但我想在纯CSS中做到这一点。
小提琴:https://jsfiddle.net/zfh263r6/5/
$('#start').on({
mouseenter: function () {
//$(this).css('height', '4px');
//$( 'progress' ).css('height', '4px');
},
mouseleave: function () {
//$(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;
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>
&#13;
答案 0 :(得分:6)
没有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>
答案 1 :(得分:3)
来自评论:
将
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*/
}