开发工具与关键技术: DW HTML技术
作者:彭智豪
撰写时间:2021/6/17
1.本案例的重点在于a 标签的相对定位与类为hover 标签的绝对定位,这个是效果显示的关键之一;
2.以下照片是本案例的效果图
3.下面是css与HTML的代码
4.overflow:hidden;的作用是隐藏li标签以外的元素,让鼠标移入的元素不显示在效果图外;
5.transition:.3s;的作用是让鼠标移入落下的遮挡时间为0.3s,这个可以凭自己的视觉爱好去修改时间,怎么好看怎么来😀!
6.另外, :hover这个委派的方法还是挺重要的,希望你们能学以致用,举一反三;
以上是我写的关于鼠标移入有遮挡效果的案例,我要分享给你们,希望可以帮助到你们。
也不知道这波操作有没有吸引到您的眼球,不管怎样,小试一番才知道效果,赶紧行动起来吧!新手上道,请多多指教。如果有更好的方法或不懂的地方欢迎在评论区教导和提问!