更改一个接一个的 CSS 元素答案

【问题标题】：Change CSS element that comes after another更改一个接一个的 CSS 元素
【发布时间】：2017-05-21 10:43:50
【问题描述】：

我想将鼠标悬停在a.bio 中，将背景.pic 更改为绿色。

我尝试了一些方法，但没有成功。

我不明白~ 的逻辑以及如何使它工作。

代码

.executivo .pic::after {
  background-color: #00845b;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  opacity: 0;
  transition: .3s ease-in-out;
}
.equipe a.bio:hover ~ .pic::after {
  opacity: 0.35;
}
.executivo .pic {
  margin-bottom: 45px;
  position: relative;
}
.executivo .pic img {
  display: block;
}

<div class="executivo">
  <div class="pic">
    <img src="<?php echo $pic; ?>" alt="<?php echo $nome; ?>" />
  </div>

  <div class="title">
    <h3><?php echo $nome; ?></h3>
  </div>

  <a class="bio" href="#">Bio+</a>

</div>

【问题讨论】：

如果图片放在链接之后，您可以这样做

标签： html css css-selectors

【解决方案1】：

在您的 HTML 中移动您的 a.bio，因为 ~ 是同级选择器（但不如 + 严格），并使用 position 在移动 HTML 之前保持原样：

片段

.executivo .pic::after {
  background-color: #00845b;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  opacity: 0;
  transition: .3s ease-in-out;
}
.executivo {
  position: relative;
}
.executivo a.bio {
  position: absolute;
  bottom: -20px
}
.executivo a.bio:hover ~ .pic img {
  opacity: 0.35;
}
.executivo .pic {
  margin-bottom: 45px;
  position: relative;
}
.executivo .pic img {
  display: block;
  max-width:100% /*demo*/
}

<div class="executivo">
  <a class="bio" href="#">Bio+</a>
  <div class="pic">
    <img src="//lorempixel.com/1600/900" alt="alt text" />
  </div>
  <div class="title">
    <h3>title</h3>
  </div>
</div>

【讨论】：

但链接.bio必须保持关闭。
@MarcoRiesco 你可以用css定位它，但我认为这是唯一的方法。
下面有a.bio，不可以吗？
我更新了我的答案，看看，我用position，如果你想在img下面有.bio，这是唯一的选择
感谢您提供此替代方案，我相信这是仅使用 css 的唯一选择。

【解决方案2】：

下一个元素选择器是

直接死者是

在 CSS 中。

这是否有助于您回答问题？

【讨论】：

您将无法使用 css 以这种方式悬停另一个元素。
.bio:hover > .pic 但您应该更改 html 顺序。
Jquery 可以做到这一点，是的 - 你是说你想要 jquery 而不是 css？
不不，我想使用纯css，但如果不是我使用jquery，请耐心等待。