<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> <style> .left{ float: left; } .clearfix:after{ content: '.'; display: block; clear: both; visibility: hidden; height: 0; } .container{ background-color: red; } .container .item{ width: 180px; height: 150px; background-color: #303a40; border: 1px solid red; overflow: hidden; position: relative; } .container .item:hover{ border: 1px solid green; } .container .item .text{ display: none; } .container .item:hover .text{ display: block; } </style> </head> <body> <div class="container clearfix"> <div class="item left"> <div class="bg"> <img src="https://ss0.bdstatic.com/94ojfd_baact8t7mm9gukt-xh_/timg?image&quality=100&size=b4000_4000&sec=1552466288&di=2833711b147f456e54b1e555602e4694&src=http://hbimg.b0.upaiyun.com/01f13dd8fcbfcfd38bd13f92cca49a0bd8ec434b12cea-0yehtq_fw658" style="height: 150px; width: 180px;"> </div> <div class="text"> <div style="z-index:9; position:absolute; left:0; right:0; top:0; bottom:0; background-color: black; opacity:0.6;"></div> <div style="z-index:10; position:absolute; left:0; right:0; top:0; bottom:0;">1000</div> </div> </div> </div> </body> </html>
如对本文有疑问, 点击进行留言回复!!
清除新版Google Chrome浏览器中表单控件(input,button...)默认的黑色边框
荐 20200714——git/mac配置/项目运行步骤/一些报错
antd 菜单组件 使用时报错:Cannot read property ‘isRootMenu‘ of undefined
CSS|div的style=“background-image: url(img/a.bmp)图片显示不出来
硬件仪表盘账号建立指导(一) --WHQL认证测试结果提交账号(一)
cookie的规范Cookie的不可跨域名性或Cookie与域名的关系
网友评论