更改接二连三的CSS元素 [英] Change CSS element that comes after another
本文介绍了更改接二连三的CSS元素的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想将鼠标悬停在a.bio
中,将背景.pic
更改为绿色.
I would like to hover in a.bio
change the background .pic
to green.
我尝试了一些方法,但是没有成功.
I tried some ways, but it did not work out.
我不了解~
的逻辑以及如何使它工作.
I did not understand the logic of ~
and how even to make it work.
代码
.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中移动a.bio
,因为~
是同级选择器(但是比+
严格),并使用position
保持在移动HTML之前的状态:
Move your a.bio
in your HTML, because ~
is a sibling selector (however less strict than the +
), and use position
to stay as it was before moving the 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>
这篇关于更改接二连三的CSS元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文