gpt4 book ai didi

html - CSS - 模糊所有的 child ,除了悬停的 child ,当鼠标悬停在 child 身上时

转载 作者:行者123 更新时间:2023-12-05 04:26:20 29 4
gpt4 key购买 nike

<分区>

因此,当鼠标悬停在 child 身上时,我一直在努力模糊 parent 的所有 child 。这是我目前取得的成就,但这不会模糊前一个 child (例如,如果您悬停第二个 child ):

.child {
height: 50px;
width:100px;
}
.child:nth-child(1) {
background-color: red;
}.child:nth-child(2) {
background-color: yellow;
}.child:nth-child(3) {
background-color: blue;
}.child:nth-child(4) {
background-color: green;
}

.parent > .child:hover ~ .child:not(:hover) {
filter: blur(15px);
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>

所以我想要实现的是,将鼠标悬停在第二个、第三个或最后一个 child 上,模糊除了悬停的 child 之外的所有 child 。是否可以使用纯 CSS,因为没有以前的子选择器?我错过了什么吗?

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com