鼠标移入单击

                           鼠标移入单击

开发工具与关键技术:DW / 前端

作者:简志杰

撰写时间:2019年02月07日

鼠标移入单击随之切换,如下图,当鼠标没有移入单击的时候,盒子里是没有图片的,把鼠标移入单击的时候,图片马上出来了,需要看哪张移鼠标去触碰就出来了,触碰到的图都会有一个高亮的效果。

鼠标移入单击鼠标移入单击鼠标移入单击鼠标移入单击鼠标移入单击鼠标移入单击
显示效果代码如下,首先在html写代码,是用来引入 js 的

鼠标移入单击

再到css 写下面的代码
list-style: none; 取消无序列表中的默认样式 font-size: 12px; 字体的大小
overflow: hidden; 超出部分隐藏(清除浮动的效果) position:relative; 相对定位
position: absolute; 绝对定位

鼠标移入单击

鼠标移入单击

然后到js写下面的代码

鼠标移入单击

这些代码基本上已经备注的很清楚了,看上去很好理解,都是一些基本的基础,可以照着上面换上你喜欢的图片,任由你操作。