2016-04-30 160 views
1

我正在處理一些項目,並且在整個元素被佔用之後我一直試圖顯示一個按鈕。我認爲我使用的是正確的語法,但事情並沒有真正起作用,我需要幫助。 代碼:懸停更改其他元素的CSS屬性不起作用

<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

我希望你們幫助我,在此先感謝。

回答

0

的問題是在

.upgrade:hover ~ a.purchaseButton

如果刪除了所有〜會工作得很好。

相關問題