代码之家 › 专栏 › 技术社区 › Marco Riesco

更改后面的CSS元素

css-selectors css html

-1

Marco Riesco · 技术社区 · 8 年前

我想停下来 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>

2 回复 | 直到 7 年前

dippas 8 年前

移动您的 a.bio 在HTML中,因为 ~ 是同级选择器(但比 + ),和使用 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

Jamie Paterson 8 年前

Nex元素选择器为

直接死者是

在css中。

这有助于你回答问题吗?

推荐文章

Monica · 使用Selenium和Python在没有url的情况下单击下载文件

2 年前

Kevin Rodgers Jr. · Python BeautifulSoup:在in select语句中排除其他标记

2 年前

Arad · 即使使用相同的选择器,外部样式表也会覆盖内部样式表

6 年前

user1032531 · jQuery Validate require\u from\u group并按名称选择

6 年前

Christian Luneborg · 星级评定不起作用

6 年前

Gabriel Morais · CSS未应用媒体查询

6 年前

Kevin · CSS属性选择器中的“i”是什么意思?[副本]

6 年前

S syed · 如何在javascript中删除DIV标记内的CSS类?[副本]

6 年前

Karos papermoon · Div和定位问题

6 年前

user9549074 · 如何从CSS中的输入文本中设置最后一个字符的样式?

6 年前