本文主要是介绍html鼠标移上去隐藏图片,纯CSS实现鼠标悬浮在图片上时显示遮掩层带有文字，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
今天和同学交流关于鼠标悬浮在图片上时显示的遮掩层，其实完全可以利用CSS中的伪类:hover来实现，说到这里很多有一定基础经验的人肯定已经想到了。
考虑到还有小白同学，我也花了几分钟写了一段代码，其实非常简单，先上图片看一下效果吧
下面来讲一讲具体思路。
首先我们在body中写一个
这个块用来包含2部分内容，一部分是Img，即图片，另一部分则是遮掩层，用一个块div来表示。此时我们得到如下代码
内容
样式就各位同学自己去加了，但是要注意一点，一般情况下。
最外面的块的宽高=img宽高=里面的块的宽高
此时出现了一个尴尬的情况，块内的内容的高度是块高度的2倍。
如下图(为了比较，没有让右边内容重合在左边)
最里面的块在黑线以下，即超出了最外面块的高度设置
也有很多解决办法，但是博主选
这篇关于html鼠标移上去隐藏图片,纯CSS实现鼠标悬浮在图片上时显示遮掩层带有文字的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
![Java实现将byte[]转换为File对象](/front/images/it_default.gif)
