Basierend auf jQuey ändert sich die Farbe, wenn die Maus darüber fährt (die gesamte Zeile ändert ihre Farbe)

Basierend auf jQuey ändert sich die Farbe, wenn die Maus darüber fährt (die gesamte Zeile ändert ihre Farbe)_jquery

WBOY

Freigeben： 2016-05-16 15:27:22

Original

1179 Leute haben es durchsucht

Viele Websites haben diesen Effekt, das heißt, wenn die Maus auf eine Zeile der Nachrichtenliste gesetzt wird, ändert sich die Farbe der gesamten Zeile. Obwohl diese Funktion auch mit CSS erreicht werden kann, unterstützen viele Browserversionen CSS3 nicht. Es gibt keine gute Unterstützung, daher ist die Verwendung von jQuery zum Erreichen dieser Art von Funktionalität in der aktuellen Situation eine gute Wahl.

Ohne weitere Umschweife werde ich einfach den JQuery-Code für Sie veröffentlichen. Der spezifische Code lautet wie folgt:

<!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>

Nach dem Login kopieren

Der obige Code implementiert die erforderlichen Funktionen, ist jedoch nicht schön genug und kann entsprechend den tatsächlichen Anforderungen geändert werden. Die Implementierungsmethode ist ebenfalls sehr einfach: Mithilfe der Methode hover () werden zwei Ereignisbehandlungsfunktionen an das Hover-Ereignis gebunden, um den CSS-Code hinzuzufügen oder zu löschen, der die Hintergrundfarbe des li-Elements festlegt.

Der obige Code ist auch sehr einfach. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht. Gleichzeitig danke ich Ihnen für Ihre fortgesetzte Unterstützung der Script House-Website.