悬停更改其他元素的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

如果删除了所有〜会工作得很好。