Maison > Article > interface Web > Basé sur jQuey, la couleur change lorsque la souris glisse dessus (la ligne entière change de couleur)_jquery

Basé sur jQuey, la couleur change lorsque la souris glisse dessus (la ligne entière change de couleur)_jquery

WBOYoriginal: 2016-05-16 15:27:221097parcourir

De nombreux sites Web ont cet effet, c'est-à-dire que lorsque la souris est placée sur une ligne de la liste d'actualités, la ligne entière change de couleur. Bien que cette fonction puisse également être réalisée en utilisant CSS, de nombreuses versions de navigateur ne prennent pas en charge CSS3. Il n'existe pas de bon support, donc dans la situation actuelle, utiliser jQuery pour obtenir ce type de fonctionnalité est un bon choix.

Sans plus tarder, je vais juste poster le code jquery pour vous. Le code spécifique est le suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
ul,li{
 list-style:none;
 font-size:12px;
}
li{
 width:250px;
 height:25px;
 line-height:25px;
}
.hover{
 background-color:#666;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 jQuery.hoverPlugin={
  hover:function(selector){
   $(selector).hover(function(){
    $(this).addClass("hover");
   },function(){
    $(this).removeClass("hover");
   });
  }
 };
 $.hoverPlugin.hover(".mytest li");
});
</script>
</head>
<body>
<ul class="mytest">
 <li>1.俄罗斯爆发陨石雨，导致上千人受伤</li>
 <li>2.朝鲜成功进行核试验，半岛无核进程终结</li>
 <li>3.中国进入春运高峰期</li>
</ul>
</body>
</html>

Le code ci-dessus implémente les fonctions requises, bien qu'il ne soit pas assez beau et puisse être modifié en fonction des besoins réels. La méthode d'implémentation est également très simple, qui consiste à utiliser la méthode hover() pour lier deux fonctions de gestion d'événements à l'événement hover afin d'ajouter ou de supprimer le code CSS qui définit la couleur d'arrière-plan de l'élément li.

Le code ci-dessus est également très simple. Si vous avez des questions, veuillez me laisser un message, je vous répondrai à temps, merci pour votre soutien continu au site Script House.

Déclaration：

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

Article précédent：Implémentation du saut de page et du chargement de pages externes dans jQuery mobile web development_jqueryArticle suivant：Implémentation du saut de page et du chargement de pages externes dans jQuery mobile web development_jquery

Articles Liés

Voir plus