jQuery 網易相簿滑鼠移動顯示隱藏效果實現代碼_jquery

其實主要是jquery 層選擇器的應用，jquery 高手可以跳過。 。 。

網易相簿效果圖如下：當滑鼠移動經過照片就顯示“設為封面｜刪除”，移開後就隱藏，此效果在web開發中經常會用到。故總結一下

直接上碼：

複製程式碼 程式碼如下:

程式碼如下:


UBL "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

title="myhome photo" alt="jQuery 網易相簿滑鼠移動顯示隱藏效果實現代碼_jquery"
src="/FileManager/upload/photo/l9pztyhx5tY=/nJnRixC/lG8=/e400bd4c851240459db967b721c5101e_a.JPG">
jQuery 網易相簿滑鼠移動顯示隱藏效果實現代碼_jquery 共2張照片


編輯屬性|href="#">刪除

title="myhome photo" alt="jQuery 網易相簿滑鼠移動顯示隱藏效果實現代碼_jquery"
src="/FileManager/upload/photo/l9pztyhx5tY =/nJnRixC/lG8=/e400bd4c851240459db967b721c5101e_a.JPG">


jQuery 網易相簿滑鼠移動顯示隱藏效果實現代碼_jqueryHinfo >共2張照片


編輯屬性|href="#">刪除

title="myhome photo" alt="jQuery 網易相簿滑鼠移動顯示隱藏效果實現代碼_jquery"
src="/FileManager/upload/photo/l9pztyhx5tY=/nJnRixC/lG8=/e400bd4c851240459 >

jQuery 網易相簿滑鼠移動顯示隱藏效果實現代碼_jquery 共2張照片


編輯屬性|href="#">刪除

運行結果：

事實上主要是jquery的層選擇器

：

$("div span")//選擇

裡所有元素
$("div>span")//選擇

元素下元素名為的元素（僅一個）
$('prev next')//選擇緊接在prev元素後的next元素（所有匹配的對象）$('prev~siblings')//選擇prev元素之後的所有sibling元素

這裡用到是選擇元素內的元素「find()」方法。

一年多沒有用JQeruy了，方法全忘記啦，複習一下吧。