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

Question

i have this code:

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>

so i have this code where in paragraph tag i have some content & i have many content like this in my whole HTML file & i have many links i want that if i hover on any link except the link everything gets blurred even the background all the text content all the divs & everything which is there in body except the item which is hovered

i have checked this question and many questions but i can not solve my problem

Thanks for answering in advance

How may try something like [this](https://stackoverflow.com/questions/19464660/apply-css-style-on-all-elements-except-with-a-specific-id) — mTvare, Jan 15 '21 at 07:36
is this what you are looking for? https://jsfiddle.net/KennyChoy/kv04y768/1/ — Kenny, Jan 15 '21 at 07:38

Pushkin · Accepted Answer · 2021-01-16T06:00:57.647

You can use :not() for achieving it. :not() keyword inverts the selection.

However the cavet for this approach is that, all the elements will be blurred if you hover over the parent, but not on child. So, make sure that children fill all the available space in the parent.

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>

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

1 Answers1