请问如何使hover事件穿透而保留click事件？

Z时代
2024-03-10
分类：IT

问题描述

如图，期望效果为在鼠标悬浮于某个节点上时，展示选项可以点击操作。但现在鼠标移动至选项图标上时会导致脱离节点hover，失去高亮和图标，偶现不停闪烁，如最下方图片所示。
请问如何使hover事件穿透而保留click事件？

其中选项图标是通过计算出的当前选择的节点位置进行定位的span。

相关代码

<template>
<div class="wrapper"style="height:100%;">
  <div class="tableTreeWrapper"style="height:100%;">
    <i-tree
    ref="tableTree"
    data="treeData"
    loadChildren="loadData"
    @node-select="nodeclick"
    @mouse-enter-node="handleNodeMouseEnter"
    @mouse-leave-node="handleNodeMouseLeave"
    ></i-tree>
  </div>
  <span ref="floatToolbar"style="floatToolbarstyle"v-show="isShowIcon">
    <svg class="icon card-icon-btn"aria-hidden="true"v-show="this.showUpdate"@click="doUpdate"><use xlink:href="#icon18_T_A_NW_bianji"/><title></title></svg>
    <svg class="icon card-icon-btn"aria-hidden="true"v-show="this.showDelete"@click="doDelete"><use xlink:href="#icon16_GJ_A_NW_shanchu"/><title></title></svg>
  </span>
  <TableModal ref="tableModal"@refresh="refresh"></TableModal>
  <GroupModal ref="groupModal"@refresh="refresh"></GroupModal>
</div></template>

    handleNodeMouseEnter (INode, event) {
      this.isShowIcon = true
      this.showUpdate = true
      this.showDelete = true
      this.floatToolbarTop = event.target.offsetHeight * INode.vnode.getIndex() - this.scrollTop
      this.selectNode = INode.getData()
    },
    handleNodeMouseLeave (INode, event) {
      this.isShowIcon = false
      this.showUpdate = false
      this.showDelete = false    },