更改接下来的CSS元素

时间:2016-01-29 14:19:04

标签: html css css3 css-selectors

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

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

我不理解~的逻辑以及如何使其发挥作用。

CODE



.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>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:9)

在您的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>

答案 1 :(得分:-1)

Nex元素选择器

+

直接欺骗

>

在css。

这有助于您回答问题吗?