如何模糊除悬停在 CSS 和 HTML 中的元素之外的所有内容

How To Blur everything except the element which is hovered in CSS & HTML

我有这个代码:

CSS

body {
    transition: background-color 600ms linear 1s;

    background-color: #1fb1ff;
    animation: clr-shift 5s infinite;
}

@keyframes clr-shift {
    0%   {background-color: #25b3ff}
    20%  {background-color: #1fc2ff}
    40%  {background-color: #1f99ff}
    60%  {background-color: #1f7bff}
    80% {background-color: #4793ff}
    80% {background-color: #1fb1ff}
}

HTML:

<body>
    <a href="https://www.github.com/mahakaal47">GitHub</a>
    <p> Lorem ipsum blah blah some content </p>
</body>

所以我有这段代码,在段落标记中我有一些内容并且我的整个 HTML 文件中有很多这样的内容并且我有很多 link 我希望如果我将鼠标悬停在任何 link 除了 link 一切都变得模糊,甚至背景 所有文本内容 所有 div 和正文中的所有内容,除了悬停的项目

我已经检查了这个 和很多问题,但我无法解决我的问题

感谢您提前回答

您可以使用 :not() 来实现它。 :not() 关键字反转选择。

然而,这种方法需要注意的是,如果将鼠标悬停在父元素上而不是子元素上,所有元素都会变得模糊。因此,请确保子项填写父项中所有可用的 space。

div:hover p:not(:hover) {
 filter: blur(50%);
 color: transparent;
 text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
<div>
  <p>One</p>
  <p>Two</p>
  <p>Three</p>
  <p>Four</p>
  <p>Five</p>
</div>