Vue.js中鼠标从父元素移入子元素时仅显示子元素悬停边框的问题

• 错误使用mouseover事件：该事件默认冒泡，鼠标移入子元素时会重复触发父元素绑定的回调，和手动加的.stop修饰符产生逻辑冲突
• 动态渲染的绝对定位边框层没有设置pointer-events: none，层级盖在实际内容上方，会拦截鼠标事件，导致绑定在内容div上的悬停事件无法正常触发
• 用两个独立布尔值控制边框显隐，状态互斥逻辑冗余，容易出现状态不同步的问题

1. 将所有@mouseover替换为不冒泡的@mouseenter，移除所有事件上的.stop修饰符，避免事件冒泡干扰
2. 给两个用来显示选中边框的绝对定位div添加pointer-events: none样式，让鼠标事件可以穿透边框层，触发下方内容元素绑定的事件
3. 用单个字符串变量代替两个独立布尔值记录当前悬停层级，简化状态判断逻辑

模板部分 #

<div id="app">
  <div 
    class="w-full m-20 ml-20 relative bg-indigo-200" 
    @mouseenter="currentHover = 'parent'"
    @mouseleave="currentHover = null"
  >
    <div class="max-w-[200px] w-full mx-auto bg-white">
      <div 
        @mouseenter="currentHover = 'child'"
        @mouseleave="currentHover = 'parent'"
        class="w-full relative py-6 flex justify-center"
      >
        <img width="160" height="60" src="https://d3ag9sk63msume.cloudfront.net/project-assets/images/noetic_logo.png" alt="Logo">
        <!-- 子元素边框 加pointer-events:none 穿透事件 -->
        <div v-show="currentHover === 'child'" class="absolute top-0 left-0 w-full h-full border-2 border-blue-500 pointer-events-none">
          <div class="relative w-full h-full">
            <!-- 操作按钮组恢复事件响应，保证可点击 -->
            <div class="absolute right-[-30px] flex flex-col pointer-events-auto">
              <div class="h-7 w-7 bg-gray-900 flex items-center justify-center cursor-pointer">
                <img src="/project-assets/images/email-template/icons/drag.png" width="20" height="20">
              </div>
              <div class="h-7 w-7 bg-gray-900 flex items-center justify-center cursor-pointer my-[1px]">
                <img src="/project-assets/images/email-template/icons/delete.png" width="17" height="17">
              </div>
              <div class="h-7 w-7 bg-gray-900 flex items-center justify-center cursor-pointer">
                <img src="/project-assets/images/email-template/icons/clone.png" width="17" height="17">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 父元素边框 加pointer-events:none 穿透事件 -->
    <div v-show="currentHover === 'parent'" class="absolute top-0 left-0 w-full h-full border-2 border-blue-500 pointer-events-none">
      <div class="relative w-full h-full">
        <!-- 操作按钮组恢复事件响应，保证可点击 -->
        <div class="absolute right-[-30px] flex flex-col pointer-events-auto">
          <div class="h-7 w-7 bg-gray-900 flex items-center justify-center cursor-pointer">
            <img src="/project-assets/images/email-template/icons/drag.png" width="20" height="20">
          </div>
          <div class="h-7 w-7 bg-gray-900 flex items-center justify-center cursor-pointer my-[1px]">
            <img src="/project-assets/images/email-template/icons/delete.png" width="17" height="17">
          </div>
          <div class="h-7 w-7 bg-gray-900 flex items-center justify-center cursor-pointer">
            <img src="/project-assets/images/email-template/icons/clone.png" width="17" height="17">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Vue逻辑部分 #

new Vue({
  el: "#app",
  data() {
    return {
      // 单变量记录当前悬停层级：null=无悬停，parent=悬停父元素，child=悬停子元素
      currentHover: null
    }
  }
})

覆盖所有使用场景：

• 鼠标从外部移入父元素非子区域：显示父元素边框
• 鼠标从父区域移入子元素：自动隐藏父边框，仅显示子元素边框
• 鼠标从子元素移回父区域：自动隐藏子边框，恢复显示父元素边框
• 鼠标从任意位置移出父容器范围：所有边框自动隐藏
• 边框层穿透事件不拦截交互，右侧操作按钮可正常点击

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