how to effect two Items hovering each others css?

Question

i'm new here and still learn to become Web designer and this is my big issue

why #btnC can effect on #btnB and #btnB can't effect on #btnC ?? i try to use "~,+, , >" and all of thease didn't work i need to know more details about hovering items on each other,

could you help me please ?????

this is my code ⬇⬇⬇⬇⬇

<style>
    
    .countainer{
        width: 500px;
        
    }
    .box{
        height: 100%;
    }
    
    #btnC{
        display: inline-block;
        text-align: center;
        position: absolute;
        background-color: #009fdf;
        border-radius: 50px;
        margin-left: 205px;
        margin-top:550px;
        text-decoration: none;
        color:#F2F2F2;
        transition: 0.8s;
    }
    
    #btnB{
        display: inline-block;
        text-align: center;
        position: absolute;
        background-color: #ffcc00;
        border-radius: 50px;
        margin-left: 380px;
        margin-top:550px;
        text-decoration: none;
        color:#53565A;
        transition: 0.8s;
    }
    #btnC div, #btnB div {
        width:150px;
        padding: 20px 0;
    }
    
#btnC:hover {
        transform: scale(1.2);
        background-color:#ffffff;
        color:#009fdf;
        transition: 0.8s;
    }
    #btnC:hover ~ #btnB {
        margin-left: 400px;
    }
    
    #btnB:hover{
        transform: scale(1.2);
        background-color:#ffffff;
        color:#ffcc00;
        transition: 0.8s;
    }
    
    #btnB:hover  #btnC {
        margin-left: 195px;
    }
    
</style>

<div class="countainer">
    <div class="box">
            <a id="btnC" href="#"><div>Individual</div></a>

            <a id="btnB" href="#"><div>Team</div></a>
        <img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a8687897-418c-40db-b92b-af479b5b1cb6/d5cyk3x-ee5a53c6-240b-400a-8ee6-64e0ac9bd4ed.jpg/v1/fill/w_900,h_360,q_75,strp/background_2012_by_davicinpuntocom-d5cyk3x.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwic3ViIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl0sIm9iaiI6W1t7InBhdGgiOiIvZi9hODY4Nzg5Ny00MThjLTQwZGItYjkyYi1hZjQ3OWI1YjFjYjYvZDVjeWszeC1lZTVhNTNjNi0yNDBiLTQwMGEtOGVlNi02NGUwYWM5YmQ0ZWQuanBnIiwid2lkdGgiOiI8PTkwMCIsImhlaWdodCI6Ijw9MzYwIn1dXX0.jLqQ7mUnFBNhVh_NpAO5plPheYvTtzQ0JvZ_8gLr5sY" width="1700px" alt="">
    </div>
</div>

Answer 1

CSS have not selector for previous sibling elements, but you can use :has selector for the problem:

    #btnC:has( + #btnB:hover)  {
        margin-left: 190px;
    }