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

第一种

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