我如何使用:has()选择器添加动画预览兄弟当悬停在一个特定的元素?

我有一个包含三个文章卡的代码，每个文章卡包含一个图像和描述。当我将鼠标悬停在一张特定的卡片上时，我想模糊预览和下一张卡片。

我尝试使用~选择器，但它只选择下一个兄弟。

.articles>*:hover ~ * {
filter: blur(1px);
}

然后，我尝试使用:has()选择器来选择预览兄弟，但它不起作用。

也许我做错了什么?

.articles>*:hover:has(~ .articles>*) {
filter: blur(1px);
}

@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;800&display=swap");
body {
font-family: "Work sans", Arial, Monospace, sans-serif;
background-color: #282a3a;
}
h3 {
font-weight: 800;
font-size: clamp(1.13rem, calc(0.86rem + 1.05vw), 1.65rem);
margin-block: 1rem;
color: #10cab7;
}
p {
font-weight: 400;
font-size: calc(1rem + 1px);
color: #829299;
}
.articles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
padding: 4rem;
gap: 2rem;
cursor: pointer;
}
.articles>* {
transition: all 0.5s ease;
background-color: #181823;
border-radius: 4px;
box-shadow: 2px 2px 2px 1.5px rgba(0, 0, 0, 0.306);
}
.articles>*:hover {
box-shadow: 0px 2px 2px 3px rgba(0, 0, 0, 0.306);
transform: scale(1.03);
}

/* add blur to all next sibling article cards when you hover over on a specific card */
.articles>*:hover~* {
filter: blur(1px);
}

/* add blur to all preview sibling article cards when you hover over on a specific card */
.articles>*:hover:has(~.articles>*) {
filter: blur(1px);
}
.articles img {
display: block;
max-width: 100%;
border-bottom: solid 3px;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
-webkit-border-image: linear-gradient( to left, rgb(5, 60, 64), rgb(0, 255, 157)) 27 / 35px;
-moz-border-image: linear-gradient(to left, rgb(5, 60, 64), rgb(0, 255, 157)) 27 / 35px;
-ms-border-image: linear-gradient(to left, rgb(5, 60, 64), rgb(0, 255, 157)) 27 / 35px;
border-image: linear-gradient(to left, rgb(5, 60, 64), rgb(0, 255, 157)) 27 / 35px;
border-image-width: 0px 0px 4px auto;
}
.articles .article-desc {
padding: 2rem;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}

<div class="articles bkg-gray">
<div class="article-1">
<img src="https://i.imgur.com/nzK9N7l.png" alt="services">
<div class="article-desc">
<h3>
Graphic Design
</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, velit? Inventore voluptas quis eveniet expedita numquam pariatur tempora.</p>
</div>
</div>
<div class="article-2">
<img src="https://i.imgur.com/5EOzUIQ.png">
<div class="article-desc">
<h3>
Graphic Design
</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, velit? Inventore voluptas quis eveniet expedita numquam pariatur tempora.</p>
</div>
</div>
<div class="article-3">
<img src="https://i.imgur.com/7cnLyBD.png" alt="services">
<div class="article-desc">
<h3>
Graphic Design
</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, velit? Inventore voluptas quis eveniet expedita numquam pariatur tempor.</p>
</div>
</div>
</div>

你可以使用这样的CSS:

.articles:hover > *:not(:hover) {
filter: blur(1px);
}

当你用鼠标输入.articles时，它会模糊所有的文章，但你正在悬停的那个。不幸的是，当你将鼠标悬停在两个条目之间的间隙时，它也会模糊所有的条目。

@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;800&display=swap");
body {
font-family: "Work sans", Arial, Monospace, sans-serif;
}
h3 {
font-weight: 800;
font-size: clamp(1.13rem, calc(0.86rem + 1.05vw), 1.65rem);
margin-block: 1rem;
color: #10cab7;
}
p {
font-weight: 400;
font-size: calc(1rem + 1px);
color: #2c4755;
}
.articles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
padding: 4rem;
gap: 2rem;
cursor: pointer;
}
.articles>* {
transition: all 0.5s ease;
border-radius: 4px;
box-shadow: 2px 2px 2px 1.5px rgba(0, 0, 0, 0.306);
}
.articles>*:hover {
box-shadow: 0px 2px 2px 3px rgba(0, 0, 0, 0.306);
transform: scale(1.03);
}
.articles:hover > *:not(:hover) {
filter: blur(1px);
}
.articles img {
display: block;
max-width: 100%;
border-bottom: solid 3px;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
-webkit-border-image: linear-gradient( to left, rgb(5, 60, 64), rgb(0, 255, 157)) 27 / 35px;
-moz-border-image: linear-gradient(to left, rgb(5, 60, 64), rgb(0, 255, 157)) 27 / 35px;
-ms-border-image: linear-gradient(to left, rgb(5, 60, 64), rgb(0, 255, 157)) 27 / 35px;
border-image: linear-gradient(to left, rgb(5, 60, 64), rgb(0, 255, 157)) 27 / 35px;
border-image-width: 0px 0px 4px auto;
}
.articles .article-desc {
padding: 2rem;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}

<div class="articles bkg-gray">
<div class="article-1">
<img src="https://i.imgur.com/nzK9N7l.png" alt="services">
<div class="article-desc">
<h3>
Graphic Design
</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, velit? Inventore voluptas quis eveniet expedita numquam pariatur tempora.</p>
</div>
</div>
<div class="article-2">
<img src="https://i.imgur.com/5EOzUIQ.png">
<div class="article-desc">
<h3>
Graphic Design
</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, velit? Inventore voluptas quis eveniet expedita numquam pariatur tempora.</p>
</div>
</div>
<div class="article-3">
<img src="https://i.imgur.com/7cnLyBD.png" alt="services">
<div class="article-desc">
<h3>
Graphic Design
</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, velit? Inventore voluptas quis eveniet expedita numquam pariatur tempor.</p>
</div>
</div>
</div>

使用Douwe de Haan的答案，将padding替换为margin，并正确应用pointer-events，完全符合预期。

.articles(即容器)上的pointer-events: none禁用了"悬停"完全，pointer-events: all上的.articles>*(子(卡))启用它，所以模糊只会在你悬停在卡上时生效，而不是在他们之外(所有)。

@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;800&display=swap");
body {
font-family: "Work sans", Arial, Monospace, sans-serif;
}
h3 {
font-weight: 800;
font-size: clamp(1.13rem, calc(0.86rem + 1.05vw), 1.65rem);
margin-block: 1rem;
color: #10cab7;
}
p {
font-weight: 400;
font-size: calc(1rem + 1px);
color: #2c4755;
}
.articles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
margin: 4rem;
gap: 2rem;
cursor: pointer;
pointer-events: none;
}
.articles>* {
transition: all 0.5s ease;
border-radius: 4px;
box-shadow: 2px 2px 2px 1.5px rgba(0, 0, 0, 0.306);
pointer-events: all;
}
.articles>*:hover {
box-shadow: 0px 2px 2px 3px rgba(0, 0, 0, 0.306);
transform: scale(1.03);
}
.articles:hover>*:not(:hover) {
filter: blur(1px);
}
.articles img {
display: block;
max-width: 100%;
border-bottom: solid 3px;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
-webkit-border-image: linear-gradient( to left, rgb(5, 60, 64), rgb(0, 255, 157)) 27 / 35px;
-moz-border-image: linear-gradient(to left, rgb(5, 60, 64), rgb(0, 255, 157)) 27 / 35px;
-ms-border-image: linear-gradient(to left, rgb(5, 60, 64), rgb(0, 255, 157)) 27 / 35px;
border-image: linear-gradient(to left, rgb(5, 60, 64), rgb(0, 255, 157)) 27 / 35px;
border-image-width: 0px 0px 4px auto;
}
.articles .article-desc {
padding: 2rem;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}

<div class="articles bkg-gray">
<div class="article-1">
<img src="https://i.imgur.com/nzK9N7l.png" alt="services">
<div class="article-desc">
<h3>
Graphic Design
</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, velit? Inventore voluptas quis eveniet expedita numquam pariatur tempora.</p>
</div>
</div>
<div class="article-2">
<img src="https://i.imgur.com/5EOzUIQ.png">
<div class="article-desc">
<h3>
Graphic Design
</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, velit? Inventore voluptas quis eveniet expedita numquam pariatur tempora.</p>
</div>
</div>
<div class="article-3">
<img src="https://i.imgur.com/7cnLyBD.png" alt="services">
<div class="article-desc">
<h3>
Graphic Design
</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, velit? Inventore voluptas quis eveniet expedita numquam pariatur tempor.</p>
</div>
</div>
</div>

相关内容

最新更新

热门标签：