伪类显示照片的小问题

   这是一个伪类显示照片的小问题

          开发工具与关键技术 :dw  html&css

           

           撰写时间:2019.1.19

           作者:彭碧霞

之前做的案例里面有一个伪类设置,是把鼠标移上去就出现一整张照片的效果,刚开始我以为直接获取类设置伪类加照片就可以了,但是并没有想象中的效果

这是我们要显示的二维码照片:

下面是我一开始的操作:

HTML:

CSS:

页面效果:

下面是我后面才想到的方法:

我想到的是照片的大小是比包裹照片的盒子大了,所以设置伪类下面放照片的盒子的大小

这是这张照片的大小:

所以要把盒子的大小设置与照片一样:

然后页面效果:

鼠标移上去

完成!

PS:虽然可能大家都会想到这样做,甚至比这个方法更好,但是这是个细节的问题,不仔细有时真不会发现,就希望大家会认真注意细节.谢谢观看!

猜你喜欢

转载自blog.csdn.net/weixin_44406304/article/details/86566335