<el-tree :data="cloudGroupsAllData" :props="defaultProps" @node-click="handleNodeClick" node-key="id" :default-expand-all="true" :expand-on-click-node="false"> <template #default="{ node, data }"> <span class="custom-tree-node"> <span>{{ node.label }}</span> <span class="tools"> <plus style="width: 1em; height: 1em; margin-right: 8px" @click="setEditData(data,'add')" color="#409EFC"></plus> <edit style="width: 1em; height: 1em; margin-right: 8px" @click="setEditData(data,'update')" color="#409EFC" v-if="data.value!=-1"></edit> <el-popconfirm :title="$t('message.publicLanguage.deleteConfirmationTip')" @confirm="deleteData(node, data)" v-if="data.value!=-1"> <template #reference> <div style="float: right"> <delete style="width: 1em; height: 1em; margin-right: 8px" color="#409EFC"></delete> </div> </template> </el-popconfirm> </span> </span> </template> </el-tree>在这个代码中，怎么让class为tools的工具栏改为鼠标覆盖的时候在显示

你可以使用CSS的`:hover`伪类来实现鼠标覆盖时显示工具栏的效果。具体做法是给`.custom-tree-node`元素添加`position: relative;`属性，然后给`.tools`元素添加`position: absolute;`和`display: none;`属性，表示工具栏是相对于`.custom-tree-node`元素定位的，并且初始时是隐藏的。最后在`.custom-tree-node:hover .tools`选择器中设置`display: block;`属性，表示当鼠标覆盖到`.custom-tree-node`元素上时，显示`.tools`元素。

具体代码如下：

.custom-tree-node {
  position: relative;
}

.tools {
  position: absolute;
  display: none;
  top: 0;
  right: 0;
}

.custom-tree-node:hover .tools {
  display: block;
}

你可以将以上CSS代码添加到你的样式文件中，即可实现鼠标覆盖时显示工具栏的效果。