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

如果你删除〜所有将工作正常。

在悬停时更改其他元素的css属性不起作用

1 个答案: