Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > Hauptteil

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

WBOY
Freigeben： 2016-05-16 17:38:53
Original
1250 Leute haben es durchsucht

其实主要是jquery 层选择器的应用，jquery 高手可以跳过。。。

网易相册效果图如下：当鼠标移动经过照片就显示“设为封面｜删除”，移开后就隐藏，此效果在web开发中经常会用到。故总结一下

直接上代码：

复制代码 代码如下:





Insert title here







jQuery 网易相册鼠标移动显示隐藏效果实现代码_jquerytitle="myhome photo" alt="myHOME"
src="/FileManager/upload/photo/l9pztyhx5tY=/nJnRixC/lG8=/e400bd4c851240459db967b721c5101e_a.JPG">


myHOME 共2张照片


编辑属性|href="#">删除



jQuery 网易相册鼠标移动显示隐藏效果实现代码_jquerytitle="myhome photo" alt="myHOME"
src="/FileManager/upload/photo/l9pztyhx5tY=/nJnRixC/lG8=/e400bd4c851240459db967b721c5101e_a.JPG">


myHOME 共2张照片


编辑属性|href="#">删除



jQuery 网易相册鼠标移动显示隐藏效果实现代码_jquerytitle="myhome photo" alt="myHOME"
src="/FileManager/upload/photo/l9pztyhx5tY=/nJnRixC/lG8=/e400bd4c851240459db967b721c5101e_a.JPG">


myHOME 共2张照片


编辑属性|href="#">删除






运行结果：

事实上主要是jquery的层选择器：

$("div span")//选择

里所有元素
$("div>span")//选择
元素下元素名为的元素（仅一个）
$('prev+next')//选择紧接在prev元素后的next元素（所有匹配的对象）
$('prev~siblings')//选择prev元素之后的所有sibling元素

这里用到是选择元素内的元素“find()”方法。

一年多没有用JQeruy了，方法全忘记啦，复习一下吧。
Verwandte Etiketten：
显示隐藏 鼠标移动
Quelle：php.cn
Vorheriger Artikel：jquery如何把参数列严格转换成数组实现思路_jquery Nächster Artikel：原生js拖拽(第一课 未兼容)拖拽思路_javascript技巧
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Verschieben Sie den Inhalt nach links, indem Sie die Eigenschaft „Width' hinzufügen Ich habe dem Körper Ränder gegeben. main {linker Rand: 200px; rechter Rand: 200px; Textaus...
Aus 2024-04-06 22:01:35
0
3
816
Wie kann ich in der mobilen Ansicht diese Navigationsleiste schließen, wenn der Benutzer auf den Link klickt? Wenn der Benutzer auf einen Link klickt, um die Website zu durchsuchen, wird die Navigatio...
Aus 2024-04-06 19:23:03
0
1
411
Reine CSS-Methode zum dynamischen Ändern der Bildquelle beim Klicken ohne Verwendung von JavaScript Ich muss den Quellcode eines Bildes per Mausklick ändern, indem ich nur CSS wie img:active...
Aus 2024-04-06 19:25:49
0
1
505
CSS-Stile werden nicht auf die Website angewendet Ich erstelle eine Website mit Bootstrap5, aber die index.css-Eigenschaften werden nicht au...
Aus 2024-04-06 17:12:23
0
1
336
Unterer CSS-Rand in der Navigationsleiste Ich habe eine Navigationsleiste und habe unten eine rote Linie hinzugefügt, wenn der Mausz...
Aus 2024-04-06 15:04:41
0
2
347
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage