悬停更改其他元素的CSS属性不起作用
问题描述:
我正在处理一些项目,并且在整个元素被占用之后我一直试图显示一个按钮。我认为我使用的是正确的语法,但事情并没有真正起作用,我需要帮助。 代码:悬停更改其他元素的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;
}
我希望你们帮助我,在此先感谢。
答
的问题是在
.upgrade:hover ~ a.purchaseButton
如果删除了所有〜会工作得很好。