检查HTML元素时，HTML元素不正确

这是一张关于这个问题的图片。只需将我的鼠标想象成绘制的红色鼠标，因为打印屏幕不会捕获鼠标

由于某些原因，即使鼠标不直接在元素上，也会高亮显示该元素

有人经历过这样的事情吗？你知道问题可能在这里吗

编辑 这是密码

    <div class="d-flex flex-column teamCard">
      <p class="teamCardHeading">Best performing teams</p>
      <div class="cardRow d-flex flex-row flex-wrap">
        <BestTeamCardComponent />
        <BestTeamCardComponent />
        <BestTeamCardComponent />
        <BestTeamCardComponent />
        <BestTeamCardComponent />
      </div>
    </div>

最佳团队卡组件

<template>
  <div class="bestTeamMetric d-flex flex-column">
    <p class="bestTeamMetricHeading">{{title}}</p>
    <div
      v-for="(rec, index) in records"
      :key="index"
      :style="{backgroundColor: index % 2 == 1 ? 'white' : '#f7f8fb'}"
      class="d-flex flex-row teamMetricRow justify-content-around"
    >
      <div class="d-flex flex-column">
        <p class="teamMetricRowTeam">{{rec.team}}</p>
        <p class="teamMetricRowMembers">{{rec.members}} members</p>
      </div>

      <p class="teamMetricRowPoints align-self-center">{{rec.points}}pts</p>

      <div class="d-flex flex-column align-self-center goalProgress">
        <div class="progressBar"></div>
        <div class="progressMade"></div>
      </div>
    </div>
  </div>
</template>

--CSS--

<style scoped lang="scss">
.bestTeamMetric {
  width: 456px;
  margin-right: 35px;
  margin-bottom: 30px;
}

.bestTeamMetricHeading {
  font-family: Averta;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  color: #5c6170;
}

.teamMetricRow {
  width: 456px;
  //   height: 56px;
  padding-top: 8px;
}

.teamMetricRowTeam {
  font-family: Averta-Bold;
  font-size: 16px;
  line-height: 24px;
  color: #203767;
}

.teamMetricRowMembers {
  font-family: Avenir;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 16px;
  color: #7e88a1;
}

.teamMetricRowPoints {
  font-family: Averta;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  color: #203767;
}

.goalProgress {
  margin-bottom: 16px;
  transform: translateX(-50px);
}

.progressBar {
  position: absolute;
  width: 192px;
  height: 3px;
  z-index: 1;
  background: #f6f7ff;
  border-radius: 32px;
}

.progressMade {
  width: 120px;
  height: 3px;
  z-index: 2;
  background: #2ab2ff;
  border-radius: 32px;
}

@media only screen and (max-width: 480px) {
  .bestTeamMetric {
    width: 345px;
  }

  .teamMetricRow {
    width: 300px;
  }

  .goalProgress,
  .progressBar,
  .progressMade {
    display: none;
  }
}

---

我真的不知道怎么做，但现在一切都很好。有一些按钮在实际位置上方100像素左右被点击，但它们现在也在工作。我经常遇到不知名的虫子。。。我没有更改任何CSS样式，这似乎是浏览器web检查器/控制台问题

请共享代码。

<style scoped lang="scss">
.bestTeamMetric {
  width: 456px;
  margin-right: 35px;
  margin-bottom: 30px;
}

.bestTeamMetricHeading {
  font-family: Averta;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  color: #5c6170;
}

.teamMetricRow {
  width: 456px;
  //   height: 56px;
  padding-top: 8px;
}

.teamMetricRowTeam {
  font-family: Averta-Bold;
  font-size: 16px;
  line-height: 24px;
  color: #203767;
}

.teamMetricRowMembers {
  font-family: Avenir;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 16px;
  color: #7e88a1;
}

.teamMetricRowPoints {
  font-family: Averta;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  color: #203767;
}

.goalProgress {
  margin-bottom: 16px;
  transform: translateX(-50px);
}

.progressBar {
  position: absolute;
  width: 192px;
  height: 3px;
  z-index: 1;
  background: #f6f7ff;
  border-radius: 32px;
}

.progressMade {
  width: 120px;
  height: 3px;
  z-index: 2;
  background: #2ab2ff;
  border-radius: 32px;
}

@media only screen and (max-width: 480px) {
  .bestTeamMetric {
    width: 345px;
  }

  .teamMetricRow {
    width: 300px;
  }

  .goalProgress,
  .progressBar,
  .progressMade {
    display: none;
  }
}