本文介绍了如何使用JavaScript实现图片的显示和隐藏功能，对比了hover伪类与JS的不同效果。通过在li标签中添加onclick事件以及在图片div中添加onmouseover事件，实现了既能显示图片又能在显示时进行其他操作，且可以通过鼠标移过图片来隐藏图片的功能。
开发工具与关键技术：DW HTML+JS
作者：杨泽平
撰写时间：2019，1,18
下面是我写的例子，首先我想做的是把一照片做到可以随意让它显示和隐藏，我先是想到用hover伪类做的；后来我改用JS来做，在代码里面我是把用hove伪类跟JS做的两种效果写在一起，这样好作比较；代码详情请看截图
我们都知道hover伪类做出来的效果是鼠标移入图片就会显示，鼠标移出图片就会消失，效果请看截图：
hover伪类确实可以做出显示和隐藏的效果，但是我想要的是照片显示的同时我可以用鼠标去操作其他的，而当我不需要图片的时候又可以随手隐藏它。
那么我改用用JS来写，我先是给外层li标签添加onclick点击事件，然后再给里面图片的div添加了onmouseover事件，JS截图如下：
这样当我们触发onclick时图片就会显示而鼠标去操作其他的时候照片也不会消失；当我们又要图片隐藏的时候只要把鼠标移到图片上就可以了，效果请看截图：
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
