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

Heim

Web-Frontend

js-Tutorial

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

May 16, 2016 pm 03:27 PM

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:

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

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.

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn