How do I make cards inside a container blurred but not the first card inside of the container?

So to breakdown what I am trying to achieve:

I want all the cards inside of a container to be blurred besides the very first card, until you actually hover on the next card in the container to which it should then blur all of the cards besides the next card you are hovering on.

I have managed to make the cards all blur and the one i am hovering on will unblur, but that means that when not hovering on the container they are all blurred. This is not what I am trying to achieve.

I have put a snippet of the structurte of the list of cards I have below:

<ul class="exp__list">
    <li class="exp__list__item">
        <div class="exp__card">
            <div class="card__header">
                <h2>2024 - PRESENT</h2>
            </div>

            <div class="card__content">
                <h3 class="card__title">Junior Web Developer</h3>
                <p class="card__info">Build and maintain a website for Dynamic Roofing
                    Solutions Ltd. Working closely with the directors to fulfill their
                    development needs.</p>
                <ul>
                    <li>
                        <div>HTML</div>
                    </li>
                    <li>
                        <div>CSS</div>
                    </li>
                    <li>
                        <div>JavaScript</div>
                    </li>
                    <li>
                        <div>Google Scripts</div>
                    </li>
                </ul>
            </div>
        </div>
    </li>
    <!-- More cards here -->
</ul>

.exp__card:hover {
        background-color: #00d20013;
        border: -1px solid var(--text-primary-color);
    }

.exp__list .exp__card {
        filter: blur(3px);
        opacity: .99;
    }

.exp__card:hover {
        filter: blur(0);
        opacity: 1;
    }

Solution

If you want it so that when you hover over a card, it becomes unblurred until another card is hovered, you can use JavaScript and add a blurred class to all cards except the one that is hovered over:

Note not hovering any card will blur all cards except the first one

const cards = document.querySelectorAll('.exp__card');

// blur all cards except the first one
cards.forEach((card, index) => {
  if (index !== 0) {
    card.classList.add('blurred');
  }
});

// unblur the card that is hovered and blur the others
cards.forEach(card => {
  card.addEventListener('mouseover', () => {
    cards.forEach(c => c.classList.add('blurred'));
    card.classList.remove('blurred');
  });

  card.addEventListener('mouseout', () => {
    cards.forEach((c, index) => {
      if (index !== 0) {
        c.classList.add('blurred');
      } else {
        c.classList.remove('blurred');
      }
    });
  });
});

.exp__card {
  width: 100px;
  height: 50px;
  margin: 5px;
  background-color: gray;
}

.blurred {
  filter: blur(3px);
}

<div class="exp__card">Card</div>
<div class="exp__card">Card</div>
<div class="exp__card">Card</div>
<div class="exp__card">Card</div>
<div class="exp__card">Card</div>
<div class="exp__card">Card</div>