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

最新推荐文章于 2025-09-07 21:46:13 发布

原创

最新推荐文章于 2025-09-07 21:46:13 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #前端

这篇博客介绍了两种不同的 CSS table th 元素悬停效果实现方式。第一种使用背景图片展示风险筛选值和污染评价信息，第二种则直接在悬停后显示文字描述，详细区分了等级Ⅰ、Ⅱ、Ⅲ的污染风险级别。内容涉及网页样式设计和交互反馈。

第一种

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

最低0.47元/天解锁文章