利用:hover, :after实现鼠标经过图标显示一张图片的效果

书中自有妍如玉

于 2022-11-26 07:00:00 发布

阅读量1k

点赞数

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

本文链接：https://blog.csdn.net/qq_26695613/article/details/127996435

版权

CSS 悬停效果污染评价风险筛选值等级区分

关键词由CSDN通过智能技术生成

前端专栏收录该内容

133 篇文章 6 订阅

订阅专栏

第一种

table th:nth-child(n+3):hover::after{
  content:'';//指标：《风险筛选值。污染评价：污染风险低
  width:250px;
  height:800px;
  border:5px solid white;
  background: url('../../../../assets/images/afterHover/grade.png') top center no-repeat; 
  background-size:100% auto;
  position:absolute;
  top:0px;
  left:-10px;
  z-index:99999999;
  vertical-align: baseline;
}

第二种：

table th:nth-child(n+3):hover::after{
  content:'等级Ⅰ：指标：≤风险筛选值。污染评价：污染风险低；等级Ⅱ：指标：＞风险筛选值，≤风险管制值。污染评价：存在污染风险；等级Ⅲ：指标：＞风险筛选值。污染评价：污染风险高；';//等级Ⅰ：指标：≤风险筛选值。污染评价：污染风险低；等级Ⅱ：指标：＞风险筛选值，≤风险管制值。污染评价：存在污染风险；等级Ⅲ：指标：＞风险筛选值。污染评价：污染风险高；
  width:300px;
  height:800px;
  border:5px solid white;
  color:white;
  background:green;
  //background: url('../../../../assets/images/afterHover/grade.png') top center no-repeat; 
  background-size:100% auto;
  position:absolute;
  top:30px;
  left:0px;
  z-index:99999999;
  vertical-align: baseline;
}