利用: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;
}

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

html5鼠标滑过边框内外发亮,JS实现鼠标滑过显示边框的菜单效果
本文实例讲述了JS实现鼠标滑过显示边框的菜单效果.分享给大家供大家参考,具体如下: JS鼠标滑过显示边框菜单 .menulines{ border:1px solid white; } .menuli ...
鼠标移入图标显示二维码功能实现
一.效果图二.代码 <!DOCTYPE html> <html> <head><meta charset="utf-8" />&l ...
html图片鼠标动态效果代码,纯css3实现鼠标经过图片显示描述的动画效果
今天给大家带来的是用css3技术实现鼠标经过图片,显示图片描述的动画效果.鼠标经过图片时,图片动画缩小并渐变显示描述.我们一起看看效果图: 源码下载我们一起学习下此案例的代码. html代码: 复制 ...
antdvue走马灯一页显示多张图片的效果
使用antdvue实现上图效果,antd和el都差不多,实现的逻辑都是包两层v-for循环, <a-carousel arrows :dots='false'><template # ...
css鼠标实现悬浮显示和隐藏
想要实现一个这样的效果,当鼠标悬浮在右边图片的时候展示出别的内容,贴出代码: 思路是:有A和B两个元素,需要B实现这样的效果,首先写好B元素的样式,给B添加一个opacity这样的属性进行隐藏,利用h ...
鼠标经过文字显示隐藏图片css样式
鼠标经过文字显示隐藏图片css样式,js鼠标经过文字显示图片预览效果,css如何实现鼠标移至文本上显示文字或图片.jQuery鼠标经过文字显示二维码代码. 这是一个比较简单的鼠标悬停经过文本显示二维码 ...
css鼠标滑过图标显示_CSS和jQuery教程：苹果风格的花式图标滑出导航
css鼠标滑过图标显示 View demo 查看演示Download Source 下载源 Today I want to show you, how to create an Apple-style ...
CSS - 鼠标移入悬停显示下拉菜单（导航栏鼠标经过 hover 时出现二级菜单）
前言该效果很常见,网上的代码都非常的乱,样式改起来非常难受. 本文提供 "最简洁" 的解决方案与干净整洁的代码,一眼看过去就知道改哪里, 配合 Vue.js 项目非常合适,如下图 ...
echarts 柱状图鼠标滑过显示图标+数字每三位打千分号+单位
echarts 柱状图鼠标悬浮显示图标+数字每三位打千分号+单位千分号+单位全部代码示例代码柱状图鼠标滑过显示单位千分号+单位 1.图标:params[i].marker 2.数字每三位 ...

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

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

最新文章

热门文章