Zoubi Amran Zoubi Amran - 7 months ago 16
HTML Question

on hover changing other element's css properties not working

I'm working on some project and I've been trying to display a button after my whole element gets hovered. I think I'm using the right syntax, but things are not really working, I need help.
Code:

<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

I hope that you guys help me out, thanks in advance.

Answer

The problem is in

.upgrade:hover ~ a.purchaseButton

if you remove the ~ all will be working just fine.

Comments