代码有bug,修改后如下:
需要注意,拷贝下面这段代码,保存为 html后缀名的文件;需要自己在相同的目录下,放置两张图片,小图片.jpg 大图片.jpg
效果如下图:当鼠标悬停在小图片上面的时候,会显示大图片;鼠标移出,隐藏大图片。
问题:定位需要读者自己去实现一下吧,偷懒了。感谢楼上分享!
<!doctype html>然后当你鼠标悬停在图片上的时候触发鼠标移动上去事件onmouseup
和鼠标移开事件
最后就是触发的方法hoverShowDiv()与hoverHiddendiv()在js中定义
图片中鼠标悬停特效代码:<img src="~/images/jalendar-wood-bg.png" id="smallimg" width="10px" height="20px" onmouseout="hoverHiddendiv()"onmouseup="hoverShowDiv()" />。
鼠标悬停的意思是指,当你的鼠标在网页的部分图标、文字或者图片上停留的时候,会有部分内容弹出,档从这个图标、文字或者图片上移开鼠标后,弹出的内容自动缩回。
举例:
鼠标悬停在百度首页(http://zhidao.baidu.com/)的文字栏,即可有下拉菜单弹出,移开鼠标,即可隐藏,这就是鼠标悬停。