communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > le corps du texte

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

WBOY
Libérer： 2016-05-16 17:38:53
original
1251 Les gens l'ont consulté

其实主要是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了，方法全忘记啦，复习一下吧。
Étiquettes associées：
显示隐藏 鼠标移动
source：php.cn
Article précédent：jquery如何把参数列严格转换成数组实现思路_jquery Article suivant：原生js拖拽(第一课 未兼容)拖拽思路_javascript技巧
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Déplacez le contenu vers la gauche en ajoutant la propriété Largeur J'ai prévu des marges au corps. main {gauche marge : 200px ; marge droite : 200px ; aligne...
Depuis 2024-04-06 22:01:35
0
3
816
En vue mobile, comment fermer cette barre de navigation lorsque l'utilisateur clique sur le lien ? Lorsque l'utilisateur clique sur un lien pour naviguer sur le site Internet, la barre de n...
Depuis 2024-04-06 19:23:03
0
1
411
Méthode CSS uniquement pour modifier dynamiquement le src de l'image au clic sans utiliser JavaScript Je dois changer le src d'une image en cliquant sur la souris en utilisant uniquement du CS...
Depuis 2024-04-06 19:25:49
0
1
505
Styles CSS non appliqués au site Je crée un site Web en utilisant Bootstrap5 mais les propriétés index.css ne sont pas appl...
Depuis 2024-04-06 17:12:23
0
1
336
Bordure inférieure CSS sur la barre de navigation J'ai une barre de navigation et j'ai ajouté une ligne rouge en bas lorsqu'un élément de la...
Depuis 2024-04-06 15:04:41
0
2
347
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal