如何模糊除悬停在 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>
我有这个代码:
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>