實現效果

完整程式碼

 樣式就隨便寫了，資料自己造的假資料，後臺格式也差不多，自行修改哈

原始碼：

<template>
  <div id="box">
    <ul>
      <li
        v-for="(item, index) in liData"
        :key="index"
        ref="selectedColor"
        @mouseenter="mouseOver(item, index)"
        @mouseleave="mouseLeave(item, index)"
      >
        <div v-show="boxDetail != index" class="divStyle">
          <img :src="item.img" alt="" style="width: 80px" />
          <span style="font-size: 22px; margin: 15px 0">{{ item.title }}</span>
          <span style="color: #2e8aee"
            >擔保金額:
            <i style="font-size: 20px">{{ item.money }}</i> 萬元</span
          >
        </div>
        <!-- 滑鼠移入展示詳情 -->
        <div class="divDetail" v-show="boxDetail == index">
          <span style="font-size: 22px;margin-top:30px;">{{ item.title }}</span>
          <span
            >描述: <i>{{ item.detail }}</i></span
          >
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      liData: [
        {
          img: require("../assets/twoStageImg/yuzhidai.png"),
          title: "餘值貸",
          money: "100",
          detail: "介紹餘值貸詳情.................",
        },
        {
          img: require("../assets/twoStageImg/zengxindai.png"),
          title: "徵信貸",
          money: "180",
          detail: "介紹徵信貸詳情.................",
        },
        {
          img: require("../assets/twoStageImg/zhengyindan.png"),
          title: "政銀貸",
          money: "200",
          detail: "介紹政銀貸詳情.................",
        },
        {
          img: require("../assets/twoStageImg/gongyedai.png"),
          title: "工業貸",
          money: "300",
          detail: "介紹工業貸詳情.................",
        },
      ],
      // 原本預設為false，但是發現當頁面第一次進入的時候第一項不顯示，後來改為null就可以，具體不知道為啥，反正改為null就可以了哈
      boxDetail: null,
    };
  },
  methods: {
    // 滑鼠移入
    mouseOver(item, index) {
      this.$refs.selectedColor[index].style.background = "sandybrown";
      if (this.boxDetail == index) {
        this.boxDetail = -1;
      } else {
        this.boxDetail = index;
      }
    },
    //滑鼠離開
    mouseLeave(item, index) {
      this.$refs.selectedColor[index].style.background = "#fff";
      if (this.boxDetail != index) {
        this.boxDetail = index;
      } else {
        this.boxDetail = -1;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
#box {
  width: 100%;
  height: 100%;
}
i {
  font-style: normal;
}
ul {
  width: 100%;
  padding-top: 20px;
  display: flex;
  li {
    list-style: none;
    width: 15%;
    height: 380px;
    margin: 20px 10px;
    border: 1px solid sandybrown;
    border-radius: 10px;
    .divStyle {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
    .divDetail {
      color: #fff;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      //   justify-content: center;
      align-items: center;
    }
  }
}
</style>