(css)点击前隐藏icon图表点击后显示

最新推荐文章于 2023-10-15 11:25:35 发布

nyf_unknown

最新推荐文章于 2023-10-15 11:25:35 发布

阅读量746

点赞数

分类专栏： CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/qq_44754635/article/details/132269709

版权

CSS 专栏收录该内容

53 篇文章 1 订阅

订阅专栏

(css)点击前隐藏icon图表点击后显示

效果
在这里插入图片描述

html

<li
    v-for="(item,index) in sessionList"
    :key="index"
    class="liClass"
    :class="{ 'active': change2 === index }"
    tabindex="2"
  >
    ...
    <el-tooltip class="item" effect="dark" content="添加到咨询指南" placement="top">
      <i
        class="el-icon-circle-plus-outline"
        size="mini"
        @click="addExample(item.q)"
      ></i>
    </el-tooltip>&nbsp;&nbsp;
    <el-tooltip class="item" effect="dark" content="删除" placement="top">
      <i class="el-icon-delete" size="mini" @click="delHandle(item.q)"></i>
    </el-tooltip>
  </li>

css

.liClass {
	...
	/deep/ .el-tooltip {
      display: none;
    }
}
.liClass:hover,
.liClass:focus { 
	... 
	/deep/ .el-tooltip {
	  display: inline-block;
	}
}