Как сделать размытыми карты внутри контейнера, но не первую карту внутри контейнера?

Итак, чтобы разбить то, чего я пытаюсь достичь:

Я хочу, чтобы все карты внутри контейнера были размыты, кроме самой первой карты, до тех пор, пока вы фактически не наведете курсор на следующую карту в контейнере, на которую затем следует размыть все карты, кроме следующей карты, на которой вы наводите курсор.

Мне удалось сделать все карты размытыми, и та, на которую я наводил курсор, размыта, но это означает, что, когда я не навожу курсор на контейнер, все они размыты. Это не то, чего я пытаюсь достичь.

Я поместил фрагмент структуры списка карт, которые у меня есть ниже:

<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;
    }

🤔 А знаете ли вы, что...
HTML можно использовать для создания структурированных документов, таких как резюме и инструкции.

[РЕШЕНО]Перейти к решению

Html113619 вопросов Css75481 вопрос Hover685 вопросов Styling274 вопроса

Ответы:

Вы можете попробовать:

.exp__list__item:not(:hover) .exp__card:first-child {
  filter: blur(0) !important;
}

Вот фрагмент, чтобы проверить это

.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;
}

.exp__list__item:not(:hover) .exp__card:first-child {
  filter: blur(0) !important;
}

<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>
    <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>
</ul>

Для этого, Первоначальная настройка: настройте структуру HTML так, как она у вас есть, при этом ul будет содержать несколько элементов li с классом exp__card.

Стилизация CSS: используйте CSS для обработки размытия карточек и эффекта наведения.

Вот каким должен быть ваш CSS.

/* Ensure the container has relative positioning */
.exp__list {
    position: relative;
}

/* Initially blur all cards and adjust opacity */
.exp__list .exp__card {
    filter: blur(3px);
    opacity: 0.9;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

/* Unblur the hovered card */
.exp__list .exp__card:hover {
    filter: blur(0);
    opacity: 1;
}

/* Unblur the first card initially */
.exp__list .exp__card:first-of-type {
    filter: blur(0);
    opacity: 1;
}

/* Ensure the hover effect only applies to the card being hovered */
.exp__list .exp__card:hover ~ .exp__card {
    filter: blur(3px);
    opacity: 0.9;
}

Решено

Если вы хотите, чтобы при наведении курсора на карточку она становилась неразмытой до тех пор, пока не будет наведена другая карточка, вы можете использовать JavaScript и добавить класс blurred ко всем карточкам, кроме той, на которую наведен курсор:

Обратите внимание, что если не навести курсор на карту, все карты, кроме первой, будут размыты.

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>

Как сделать размытыми карты внутри контейнера, но не первую карту внутри контейнера?

Ответы:

Интересные вопросы для изучения