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