Méthode jQuery pour implémenter des liens de texte de couche cachée lorsque la souris passe sur

Méthode jQuery pour implémenter des liens de texte de couche cachée lorsque la souris passe sur_jquery

WBOY

Libérer： 2016-05-16 15:37:03

original

1261 Les gens l'ont consulté

L'exemple de cet article décrit comment jQuery implémente un lien texte de calque caché qui apparaît lorsque la souris passe dessus. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Voici une démonstration de la méthode Jquery d'affichage des calques cachés. Un lien texte apparaît lorsque la souris passe dessus, simulant l'effet de scoring. Il n'y a aucune action ajoutée ici, seule l'implémentation de l'effet de premier plan est affichée.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

http://demo.jb51.net/js/2015/jquery-mouse-over-show-txt-demo/

Le code spécifique est le suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQ显示隐藏层，鼠标经过时出现文字链接</title>
<style>.list span{display:none}</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
 $(".list li").hover(function(){
  $(this).find("span").show();
 },function(){
  $(this).find("span").hide();
 });
});
</script>
</head>
<body>
<ul class="list">
 <li><a href="#">文字链接</a>　<em>显示</em>　<span><a href="#">好评</a> <a href="#">中评</a> <a href="#">差评</a></span></li>
 <li><a href="#">文字链接</a>　<em>显示</em>　<span><a href="#">好评</a> <a href="#">中评</a> <a href="#">差评</a></span></li>
 <li><a href="#">文字链接</a>　<em>显示</em>　<span><a href="#">好评</a> <a href="#">中评</a> <a href="#">差评</a></span></li>
 <li><a href="#">文字链接</a>　<em>显示</em>　<span><a href="#">好评</a> <a href="#">中评</a> <a href="#">差评</a></span></li>
 <li><a href="#">文字链接</a>　<em>显示</em>　<span><a href="#">好评</a> <a href="#">中评</a> <a href="#">差评</a></span></li>
</ul>
</body>
</html>

Copier après la connexion

J'espère que cet article sera utile à la programmation jQuery de chacun.