So targetieren Sie untergeordnete Elemente in einem anderen Wrapper

Question

Ich habe derzeit ein Problem, das auf das richtige Element innerhalb von CSS abzielt. Ich möchte, dass die .sizewave sowohl auf sich selbst als auch auf die eine mit der Bezeichnung .bp_bar abzielt. Wie kann ich den zweiten lösen?

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; 
} 

Answer 1

Dies sollte tun.

Answer 2

können Sie ein verwenden, um die Geschwister-Selektoren

The general sibling selector ~

.bp_outer_wrapper .sizewave:hover ~ .bp_wrapper .bp_bar{ 
    animation: bloodpreassure 7s 1 ease-in-out; 
    animation-fill-mode: forwards; 
} 

The adjacent sibling selector +

.bp_outer_wrapper .sizewave:hover + .bp_wrapper .bp_bar{ 
    animation: bloodpreassure 7s 1 ease-in-out; 
    animation-fill-mode: forwards; 
} 

Answer 3

Verwenden Sie die nächste Geschwister elemnt + slector sehen doc

.bp_outer_wrapper .sizewave:hover + .bp_wrapper .bp_bar{ 
    animation: bloodpreassure 7s 1 ease-in-out; 
    animation-fill-mode: forwards; 
} 

Answer 4

Danke an euch beide, ich habe die Antwort von Edison D'souza gemacht.

Kann jemand von euch diese Syntax erklären? Ich habe einen Post gesehen, aber nicht ganz verstanden. Die folgenden, was bedeuten sie eigentlich:

+ > ~ <

Gibt es mehr als die vier?