Vue 鼠标滑入元素改变其背景颜色，且鼠标划入另一块区域,背景颜色保持不变

如上图所示：鼠标划入"条件区域",对应ul元素改变背景颜色，且划入内容区域时，ul元素的背景颜色保持不变。只有当鼠标划出"内容区域"，或者切换到"条件区域"的其他ul元素上时，背景颜色才恢复

HTML

<template>
  <div class="apps">
    <div class="parent">
      <ul
        v-for="(item, index) in 5"
        :key="index"
        @mouseover="mouseoverParent(index)"
        @mouseout="mouseoutParent(index)"
        class="parent-ul"
      >
        <li>触摸条件-{{ item }}</li>
      </ul>

      <div
        class="other-div"
        @mouseover="mouseoverOther()"
        @mouseout="mouseoutOther()"
      >
        <ul v-for="(item, index) in 10" :key="index">
          <li>内容-{{ item }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

JS

this.index 初始值为 0

    mouseoverParent(index) {
      let i
      i = index + 1
      this.index = i
      const style = "background:#ff6700"
      document.querySelector(`.parent > :nth-child(${i})`).style = style
    },
    mouseoutParent(index) {
      let i
      i = index + 1
      this.index = i
      const style = "background:#b0b0b0"
      document.querySelector(`.parent > :nth-child(${i})`).style = style
    },
    mouseoverOther() {
      const style = "background:#ff6700"
      document.querySelector(`.parent > :nth-child(${this.index})`).style =
        style
    },
    mouseoutOther() {
      const style = "background:#b0b0b0"
      document.querySelector(`.parent > :nth-child(${this.index})`).style =
        style
    },

SCSS

.apps {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.parent {
  position: relative;
  width: 200px;
  height: 400px;
  background: #b0b0b0;
  text-align: center;

  .parent-ul {
    padding-top: 30px;
    height: 40px;
    width: 100%;
    &:hover ~ .other-div {
      width: 400px;
    }
    li {
      font-size: 16px;
    }
  }
}

.other-div {
  overflow: hidden;
  height: 0;
  transition: all 0.3s;

  position: absolute;
  width: 0; // 当元素内存在内容时,设置宽度才显示
  height: 400px;
  left: 200px;
  top: 0;
  background: palevioletred;
  box-shadow: 5px 0 15px -5px rgba(0, 0, 0, 0.6);

  display: inline-flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: flex-start;

  &:hover {
    width: 400px;
  }

  ul {
    width: 120px;
    height: 60px;
    li {
      font-size: 16px;
    }
  }
}