Html Question posted in
Some basic documentation can be found here.

Html – How to blur rest of the element when someone hover one of them using CSS & JS

<section class="menu-container">
  <p id="option-one" class="menu-option">Option One</p>
  <p id="option-two" class="menu-option">Option Two</p>
  <p id="option-three" class="menu-option">Option Three</p>
  <p id="option-foure" class="menu-option">Option Four</p>
</section>

I have four menu elements with those IDs (option-one, option-two, option-three, option-foure).

When someone hovers over one of them they blur the rest of the options using JS or CSS either the options before or after the hovered element are all blurred but not the hovered element.

Tags:

3

Answers


  1. 0

    You could use CSS like this to blur any menu options that are not being hovered.

    .menu-option:not(:hover) {
  filter: blur(4px);
}

    but you only want to blur menu items when one of the other menu options is hovered, so we can say to only blur a not hovered menu option when it is inside of a container that also contains a hovered menu item like this:

    .menu-container:has(.menu-option:hover) .menu-option:not(:hover) {
  filter: blur(4px);
}
    <section class="menu-container">
  <p id="option-one" class="menu-option">Option One</p>
  <p id="option-two" class="menu-option">Option Two</p>
  <p id="option-three" class="menu-option">Option Three</p>
  <p id="option-foure" class="menu-option">Option Four</p>
</section>
    Login or Signup to reply.
  2. 0

    This is kind of complicated CSS, put basically the .menu-container p:hover ~ p selects all elements after the one that you hovered, and the .menu-container p:has(~ p:hover) does the opposite.

    .menu-container p:hover ~ p, .menu-container p:has(~ p:hover){
  filter: blur(5px)
}
    <section class="menu-container">
  <p id="option-one" class="menu-option">Option One</p>
  <p id="option-two" class="menu-option">Option Two</p>
  <p id="option-three" class="menu-option">Option Three</p>
  <p id="option-foure" class="menu-option">Option Four</p>
</section>
    Login or Signup to reply.
  3. 0

    If you concern about the compatibility of :has() pseudo class, here’s a solution without using it.

    .menu-container {
  pointer-events: none;
}

.menu-container * {
  pointer-events: initial;
}

.menu-container .menu-option:not(:hover) {
  filter: blur(4px);
}

.menu-container:not(:hover) .menu-option {
  filter: none;
}
    <section class="menu-container">
  <p id="option-one" class="menu-option">Option One</p>
  <p id="option-two" class="menu-option">Option Two</p>
  <p id="option-three" class="menu-option">Option Three</p>
  <p id="option-foure" class="menu-option">Option Four</p>
</section>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search