css 当鼠标悬停在特定元素上时，如何使用：has()选择器为预览兄弟添加动画？

guykilcj  于 2023-04-08  发布在  其他
关注(0)|答案(2)|浏览(110)

我有一个代码，里面有三张文章卡片，每张卡片都包含一个图像和描述。当我将鼠标悬停在一张特定的卡片上时，我想模糊预览和下一张卡片的兄弟姐妹。
我尝试使用~选择器，但它只选择下一个同级。

.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

2条答案

按热度按时间
aurhwmvo

aurhwmvo1#

你可以使用这个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>
赞(0）分享  回复(0）举报  2023-04-08
piv4azn7

piv4azn72#

使用Douwe de Haan的answer，并将padding替换为正确应用了pointer-events的margin，它完全可以按预期工作。
.articles（容器）上的pointer-events: none完全禁用了“悬停”，而.articles>*（子卡）上的pointer-events: all启用了它，所以模糊只会在你悬停在卡上时生效，而不是在它们（所有）之外。

@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>
赞(0）分享  回复(0）举报  2023-04-08
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com