How to make the hover event pass through and keep the click event?

As shown in the picture1, the expected effect is that when the mouse hovers over a node, the display options are clickable. However, when the mouse is moved over the option icon, the icon closes and the node has no highlight and occasionally keeps blinking.

I tried to use "pointer-events:none;" and another method to trigger the click event, but it didn't work because the position of option span is calculated by compute().

"i-tree" is a component imported from a third-party library that does not provide the required api and I cannot modify it, I have to use this component due to the specification.

<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
    },