html - Hover button change css of other class -

in following html .pricing-item has border appears when hovered (.pricing-item:hover::after). trying set when button (pricing-button btn-primary) hovered, css .pricing-item border set '0px;'.

<div class="pricing-item">                 <div class="pricing-icon"></div>                 <h3 class="pricing-title">title</h3>                 <div class="pricing-price"><span class="pricing-currency">$</span>200<span class="pricing-period">/ year</span></div>                 <ul class="pricing-feature-list">                     <li class="pricing-feature">feature</li>                     <li class="pricing-feature">feature</li>                     <li class="pricing-feature">feature</li>                     <li class="pricing-feature">feature</li>                 </ul>                 <button class="pricing-button btn btn-primary">choose plan</button> 

in css file tried using ~ or + make 1 class affect other not getting right. appreciated. thanks.

here trick can do, achieve want.

.pricing-item-wrapper {    position: relative;  }    .pricing-item {    padding-bottom: 30px;    border: 1px solid red;    z-index: 1;  }    .pricing-button {    position: absolute;    bottom: 10px;    left: 1px;    z-index: 2;  }    .pricing-button:hover + .pricing-item {    border: 1px solid transparent;  }

<div class="pricing-item-wrapper">    <button class="pricing-button btn btn-primary">choose plan</button>    <div class="pricing-item">      <div class="pricing-icon"></div>      <h3 class="pricing-title">title</h3>      <div class="pricing-price">        <span class="pricing-currency">$</span>        200        <span class="pricing-period">/ year</span>      </div>      <ul class="pricing-feature-list">        <li class="pricing-feature">feature</li>        <li class="pricing-feature">feature</li>        <li class="pricing-feature">feature</li>        <li class="pricing-feature">feature</li>      </ul>    </div>  </div>