ホバー上で他の要素のCSSプロパティが変更されていない

Question

私はいくつかのプロジェクトに取り組んでいます。私は要素全体を掴んだ後にボタンを表示しようとしています。私は正しい構文を使っていると思いますが、実際には機能していないので、私は助けが必要です。 コード：

<div class="upgrade"> 
     <a href="#" class="purchaseButton">PURCHASE UPGRADE</a> 
     <a href="#"> 
     <div class="upgradeFooter"> 
      <span>example</span> 
     </div> 
     </a> 
</div> 

.upgrade { 
    width: 24%; 
    height: 48%; 
    background: url('../background.jpg'); 
    margin-right: 1%; 
    float: left; 
    margin-bottom: 2%; 
    transition: background 0.5s; 
} 

.upgrade:hover { 
    background: #d20a30; 
} 

.upgrade:hover ~ a.purchaseButton { 
    opacity: 1; 
    filter: alpha(opacity=100); 
} 

a.purchaseButton { 
    text-transform: uppercase; 
    background: #EEEEEE; 
    color: #000; 
    font-weight: 400; 
    padding: 15px; 
    margin-top: 100px; 
    margin-left: 18%; 
    float: left; 
    border-radius: 5px; 
    transition: background 0.5s; 
    opacity: 0; 
    filter: alpha(opacity=0); 
} 

a.purchaseButton:hover { 
    background: #ccc; 
} 

.upgradeFooter { 
    background: rgba(0, 0, 0, 0.3); 
    height: 20%; 
    margin-top: 25%; 
    box-sizing: border-box; 
    transition: background 0.5s; 
    float: left; 
    width: 100%; 
} 

.upgradeFooter span { 
    padding: 19px 0; 
    width: 100%; 
    float: left; 
    text-align: center; 
    font-weight: 400; 
    text-transform: uppercase; 
    color: #fff; 
} 

.upgradeFooter:hover { 
    background: #d20a30; 
} 

Code in JSFiddle

私は事前のおかげで、あなたたちは私を助けることを願っています。

Answer 1

問題は、あなたが〜を削除する場合は、すべてがうまく働くことになり

.upgrade:hover ~ a.purchaseButton

です。