Change border from parent div by hovering the child div

Question

I try to change the color of the border but nothing works out. Is it even possible with css? I already found this: How to affect other elements when one element is hovered and also How to style the parent element when hovering a child element?

Some java / jquery solution?

.wcppec-checkout-buttons {
  outline: 10px solid #ffc439;
  outline-offset: -10px;
}

#woo_pp_ec_button_cart {
  height: 44px;
}

#woo_pp_ec_button_cart:hover>.wcppec-checkout-buttons {
  outline: 10px solid #f1bb37;
  outline-offset: -10px;
}

<div class="wcppec-checkout-buttons">
  <div id="woo_pp_ec_button_cart">
  </div>
</div>

Answer 1

You can use this javascript

const child = document.getElementById("woo_pp_ec_button_cart");
child.onmouseover=function(){
    this.parentElement.style="outline:10px solid blue"
}

Or if it works for you you can change the css to this

.wcppec-checkout-buttons:hover  {
    outline: 10px solid #f1bb37;
    outline-offset: -10px;
}

Check which one works better for you.

Answer 2

Apparently did not understand something in SO 8114657 answers. Here is your working code in accordance with that answer....

.wcppec-checkout-buttons { 
    pointer-events: none; /* NEW */
    
    outline: 10px solid #ffc439;
    outline-offset: -10px
}

#woo_pp_ec_button_cart {
    pointer-events: auto; /* NEW */

    height: 44px
}
#woo_pp_ec_button_cart:hover { /* CHANGED */
    outline: 10px solid #f1bb37;
    outline-offset: -10px
}

<div class="wcppec-checkout-buttons">
    <div id="woo_pp_ec_button_cart"></div>
</div>