jQuery网易相册鼠标移动显示隐藏效果实现代码

其实主要是jquery层选择器的应用，jquery高手可以跳过。网易相册效果图如下：当鼠标移动经过照片就显示"设为封面|删除",移开后就隐藏，此效果在网开发中经常会用到。故总结一下

直接上代码：复制代码代码如下：DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www .w3。org/TR/HTML 4/松散。DTD ' HTML头元http-equiv=' Content-Type ' Content=' text/HTML；charset=UTF-8 '标题在此插入标题/title style type='text/css ' .al _ info { display : none } # img div { float : left宽度： 170像素；高度： 130像素；显示器：块；padd :15 px 10px } # imgdiv img { width :160 px高度：140 px}/样式脚本类型=' text/JavaScript ' src=' http :/js/jQuery。量滴js/'脚本脚本类型='text/javascript' jQuery(文档)。ready(function(){ jQuery(' imgvv div ')).悬停(function() { jQuery(this)).查找(' #oper ').显示()。查找(' a ').attr('href '，' JavaScript : void(0)')；}，function() { jQuery(this).查找(' #oper ').hide()；});});/script/head body div id=' imgvv ' div id=' img div ' span class=' albumdiv ' onclick=' show photo(61)' img title=' my home photo ' alt=' my home ' src=' http :/file manager/upload/photo/l9pztyhx5tY=/nJnRixC/lG8=/e 400 BD 4c 851240459 db 967 b 721 c 5101 e _ a。共2张照片/span br span class=' al _ info ' id=' oper ' a href=' # '编辑属性/a|a href='# '删除/a/span/div div id=' imgdiv ' span class=' albumdiv ' onclick=' show photo(61)' img title=' my home photo ' alt=' my home ' src=' http :/文件管理器/上传/photo/l9pztyhx5tY=/nJnRixC/lG8=/e 400 bd4c 851240459 db 967 b 721 c 5101 e _ a . JPG '/span br span title='共2张照片/span br span class=' al _ info ' id=' oper ' a href=' # '编辑属性/a|a href='# '删除/a/span/div div id=' imgdiv ' span class=' albumdiv ' onclick=' show photo(61)' img title=' my home photo ' alt=' my home ' src=' http :/文件管理器/上传/photo/l9pztyhx5tY=/nJnRixC/lG8=/e 400 bd4c 851240459 db 967 b 721 c 5101 e _ a . JPG '/span br span title='共2张照片/span br span class=' al _ info ' id=' oper ' a href=' # '编辑属性/a|a href='# '删除/a /span /div /div /body /html运行结果

事实上主要是jquery的层选择器：$("div span")//选择差异里所有跨度元素$("div span")//选择差异元素下元素名为跨度的元素（仅一个)$("上一个下一个")//选择紧接在上一个元素后的然后元素（所有匹配的对象)$(“prev ~兄弟")//选择上一个元素之后的所有兄弟元素这里用到是选择元素内的元素" find()"方法。一年多没有用JQeruy了，方法全忘记啦，复习一下吧。