css+js 实现卡片悬停放大动画，其他元素缩小模糊效果

效果图如下:

之前看有人通过 纯css 实现，通过 父元素 框选 子元素实现，会有一个问题，当我鼠标在 白色空白区域，也会触发 模糊效果。
我想实现的效果是，只有在 灰色区域才触发效果。

    <div class="container">
      <div
        v-for="(item, index) in cardList"
        :key="item.id"
        class="card"
        :class="`${item.isSelect === 'select' ? 'select-card' : item.isSelect === 'not-select' ? 'not-select' : ''} `"
        @mouseleave="mouseLeaveOne(item.id)"
        @mouseenter="mouseOverOne(item.id)"
      >
        <div class="name">{{ item.name }}</div>
      </div>
    </div>

cardList: [
        { id: 1, name: "lllsj1" },
        { id: 2, name: "lllsj2" },
        { id: 3, name: "lllsj13" },
        { id: 4, name: "lllsj14" },
        { id: 5, name: "lllsj15" },
        { id: 6, name: "lllsj6" },
        { id: 7, name: "lllsj17" },
        { id: 8, name: "lllsj17" },
        { id: 9, name: "lllsj17" },
        { id: 10, name: "lllsj17" },
      ],

  mounted() {
    this.cardList.forEach(item => {
      this.$set(item, "isSelect", "normal");
    });
  },

   mouseLeaveOne(id) {
      this.cardList.forEach(item => {
        this.$set(item, "isSelect", "normal");
      });
    },
    mouseOverOne(id) {
      this.cardList.forEach(item => {
        this.$set(item, "isSelect", "not-select");
        if (item.id === id) {
          this.$set(item, "isSelect", "select");
        }
      });
    },

.container {
  // height: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;

  .card {
    width: 200px;
    height: 200px;
    background: #ccc;
    border: 1px solid #ccc;
    transition: 0.5s ease;
    margin: 10px;
  }
  .not-select {
    filter: blur(10px);
    transform: scale(0.9);
    opacity: 0.8;
    background: green;
  }
  .select-card {
    background: yellow;
    filter: blur(0);
    transform: scale(1.1);
    opacity: 1;
  }
}