前端划过下拉框出现并有划过点击事件

一、区分mouseenter和mouseover
mouseenter 和 mouseover 都是鼠标进入元素时触发的事件，但它们的核心区别在于 事件冒泡 和 子元素触发逻辑：

1. 事件冒泡
   mouseenter：不冒泡。只有鼠标进入绑定的元素本身时才会触发。

mouseover：会冒泡。当鼠标进入绑定的元素或其子元素时触发，且事件会向上冒泡到父级元素。
2. 子元素触发逻辑
mouseenter：仅在鼠标首次进入绑定元素时触发一次。如果鼠标在元素内部移动到子元素上，不会重复触发。

mouseover：如果鼠标从绑定元素移动到其子元素上，会触发子元素的 mouseover 事件，并通过冒泡触发父元素的 mouseover。
二、示例

//第一层高度宽度限制 避免子元素高度超出影响展示效果。
<div style="width: 1.2rem;height:0.4rem;position: relative;">
	//第二层绝对定位固定摆放位置
    <div style="position: absolute;top: 0;" class="downloadBox1" @mouseenter="mouseoverFn" @mouseleave="mouseoutFn">
    //页面中固定标签 划过该标签时候显示隐藏元素
    <div class="xzhyjy">下载会议记录</div>
    //该盒子相对定位占高度。并且有判断显隐条件
    <div class="hideBox"   v-if="flag" style="position: relative;">
      <div class="itemBox" @click="download_hyjy_word">      			  <div class="text">下载为Word</div>
     </div>
    <div class="itemBox" @click="download_hyjy_excel">
      <div class="text">下载为Excel</div>      
     </div>
</div>