Html 如何在另一个包装器中以子元素为目标
我目前在CSS中有一个针对正确元素的问题。我希望.sizewave同时针对自身和名为.bp\u bar的对象。我如何解决第二个问题Html 如何在另一个包装器中以子元素为目标,html,css,animation,css-selectors,parent,Html,Css,Animation,Css Selectors,Parent,我目前在CSS中有一个针对正确元素的问题。我希望.sizewave同时针对自身和名为.bp\u bar的对象。我如何解决第二个问题 HTML: <div class="bp_outer_wrapper"> <img class="sizewave" src="media/images/heart.svg"> <div class="bp_wrapper"> <div class="bp_bar"></div&
HTML:
<div class="bp_outer_wrapper">
<img class="sizewave" src="media/images/heart.svg">
<div class="bp_wrapper">
<div class="bp_bar"></div>
</div>
</div>
CSS:
/*This one works*/
.bp_outer_wrapper .sizewave:hover{
animation: sizewave 1s 7 ease-in-out both;
}
/*This one does not work*/
.bp_outer_wrapper .sizewave:hover .bp_outer_wrapper .bp_wrapper .bp_bar{
animation: bloodpreassure 7s 1 ease-in-out;
animation-fill-mode: forwards;
}
HTML:
CSS:
/*这个有效*/
.bp_外层包装。大小Wave:悬停{
动画:sizewave 1s 7轻松输入和输出;
}
/*这个不行*/
.bp\u outer\u wrapper.sizewave:悬停.bp\u outer\u wrapper.bp\u wrapper.bp\u栏{
动画:血色预印7S1缓进缓出;
动画填充模式:正向;
}
您可以使用同级选择器中的一个
使用下一个同级元素+选择符请参见 这应该可以
.sizewave + .bp_wrapper > .bp_bar {
//CSS Styles
}
.bp_outer_wrapper .sizewave:hover + .bp_wrapper .bp_bar{
animation: bloodpreassure 7s 1 ease-in-out;
animation-fill-mode: forwards;
}
.bp_outer_wrapper .sizewave:hover + .bp_wrapper .bp_bar{
animation: bloodpreassure 7s 1 ease-in-out;
animation-fill-mode: forwards;
}
.sizewave + .bp_wrapper > .bp_bar {
//CSS Styles
}