Svelte组件中卡片hover效果失效问题排查（HTML+CSS）

我是编程新手，这是我第一次发帖求助。我想让卡片的hover效果生效，但一直没成功，试过给多个类加hover样式都没用。这个效果在修改Bootstrap响应式类（col-md、col-lg等）之前是正常的。以下是我的Svelte组件代码：

<h1 class="text-center text-light my-5 animate__animated animate__fadeInDown">
  Projects
</h1>

<div class="container mt-5">
  <div class="row justify-content-center align-items-center">
    <div class="col-lg-3 col-md-4 col-sm-6 mb-4">
      <div
        class="card bg-black text-light border-opacity-25 border-light animate__animated animate__fadeInLeft"
      >
        <!-- svelte-ignore a11y-img-redundant-alt -->
        <img
          class="card-img-top object-fit-fill"
          width="150"
          height="150"
          src="/img/justme.webp"
          alt="Card image"
        />
        <div class="card-body">
          <strong
            class="card-text d-flex justify-content-center align-items-center"
            >This Portfolio</strong
          >
          <hr />
          <div
            class="container d-flex justify-content-between align-content-center my-2"
          >
            <img src="/img/svelte.svg" height="40" alt="Svelte" />
            <img src="/img/javascript.svg" height="40" alt="JavaScript" />
            <img src="/img/bootstrap.svg" height="40" alt="Bootstrap" />
          </div>
        </div>
      </div>
    </div>

    <!-- Add more cards here with the same structure -->

    <div class="col-lg-3 col-md-4 col-sm-6 mb-4">
      <div
        class="card bg-black text-light border-opacity-25 border-light animate__animated animate__fadeInLeft"
      >
        <!-- svelte-ignore a11y-img-redundant-alt -->
        <img
          class="card-img-top object-fit-fill"
          width="150"
          height="150"
          src="/img/countries.webp"
          alt="Card image"
        />
        <div class="card-body">
          <strong
            class="card-text d-flex justify-content-center align-items-center"
            >Countries App</strong
          >
          <hr />
          <div
            class="container d-flex justify-content-between align-content-center my-2"
          >
            <img src="/img/angular.svg" height="40" alt="Angular" />
            <img src="/img/typescript.svg" height="40" alt="TypeScript" />
            <img src="/img/bootstrap.svg" height="40" alt="Bootstrap" />
          </div>
        </div>
      </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6 mb-4">
      <a href="">
        <div
          class="card bg-black text-light border-opacity-25 border-light animate__animated animate__fadeInRight"
        >
          <!-- svelte-ignore a11y-img-redundant-alt -->
          <img
            class="card-img-top object-fit-cover"
            width="150"
            height="150"
            src="/img/giphy.webp"
            alt="Card image"
          />
          <div class="card-body">
            <strong
              class="card-text d-flex justify-content-center align-items-center"
              >GIFs App</strong
            >
            <hr />
            <div
              class="container d-flex justify-content-between align-content-center my-2"
            >
              <img src="/img/angular.svg" height="40" alt="Angular" />
              <img src="/img/typescript.svg" height="40" alt="TypeScript" />
              <img src="/img/bootstrap.svg" height="40" alt="Bootstrap" />
            </div>
          </div>
        </div>
      </a>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6 mb-4" id="carta">
      <div
        class="card bg-black text-light border-opacity-25 border-light animate__animated animate__fadeInRight"
      >
        <!-- svelte-ignore a11y-img-redundant-alt -->
        <img
          class="card-img-top object-fit-cover"
          width="150"
          height="150"
          src="/img/twitterdb.webp"
          alt="Card image"
        />
        <div class="card-body">
          <strong
            class="card-text d-flex justify-content-center align-items-center"
            >Twitter Database</strong
          >
          <hr />
          <div
            class="container d-flex justify-content-center align-content-center my-2"
          >
            <img src="/img/mysql.svg" height="40" alt="MySQL" />
          </div>
        </div>
      </div>
    </div>

    <!-- Add more cards here with the same structure -->
  </div>
</div>

<style>
  .card {
    height: auto;
    max-width: 280px;
    min-width: 160;
    overflow: hidden;
    border-radius: 15px;
    background-image: linear-gradient(
      135deg,
      rgb(255, 255, 255, 15%),
      rgb(21, 25, 31, 0%)
    );
    transition: transform 0.2s ease, filter 0.2s ease;
  }

  .card:hover {
    filter: drop-shadow(0 0 0px rgb(255, 255, 255, 100%));
    transform: scale(1.05);
    
  }

  @media (max-width: 767px) {
    .row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }

    .col-sm-6 {
      flex-basis: 50%;
    }
  }
</style>

问题原因及修复方案 #

核心问题 #

1. CSS语法错误：.card里的min-width: 160缺少单位px，导致布局计算异常，干扰hover事件触发。
2. 阴影参数无效：drop-shadow(0 0 0px ...)的模糊半径为0，hover时无视觉变化，容易误以为效果未生效。
3. Bootstrap列容器限制：响应式列默认规则可能导致卡片缩放时被裁剪，或hover事件被父容器拦截。
4. <a>标签布局问题：包裹卡片的<a>未设为块级元素，hover区域不完整。

修复步骤 #

1. 修正CSS语法与无效参数

修改.card基础样式，补上单位并调整阴影参数：

.card {
  height: auto;
  max-width: 280px;
  min-width: 160px; /* 补上px单位 */
  overflow: hidden;
  border-radius: 15px;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.15), /* 改用标准rgba语法 */
    rgba(21, 25, 31, 0)
  );
  transition: transform 0.2s ease, filter 0.2s ease;
  cursor: pointer; /* 添加指针提示，明确可交互 */
}

.card:hover {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 1)); /* 调整模糊半径为8px，显示可见阴影 */
  transform: scale(1.05);
}

2. 让<a>标签覆盖整个卡片

给包裹卡片的<a>设置块级样式，确保hover区域完整：

a {
  display: block;
  text-decoration: none; /* 去掉默认链接下划线 */
}

a .card {
  width: 100%; /* 卡片占满父容器宽度 */
}

3. 解除列容器的溢出限制

避免卡片缩放时被列裁剪：

.col-lg-3, .col-md-4, .col-sm-6 {
  overflow: visible;
}

4. 提升样式优先级（可选）

如果Bootstrap样式覆盖自定义hover效果，使用更具体的选择器：

.container .row .col-lg-3 .card:hover,
.container .row .col-md-4 .card:hover,
.container .row .col-sm-6 .card:hover {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 1));
  transform: scale(1.05);
}

按以上步骤修改后，卡片的hover效果应该能正常触发并显示视觉变化。

内容的提问来源于stack exchange，提问作者RuloX