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

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

WBOY

Libérer： 2016-05-16 15:27:22

original

1105 Les gens l'ont consulté

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>

Copier après la connexion

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.