Heim  >  Artikel  >  Web-Frontend  >  Methode zum Erstellen eines Mouseover-Effekts basierend auf jQuery_jquery

Methode zum Erstellen eines Mouseover-Effekts basierend auf jQuery_jquery

WBOY
WBOYOriginal
2016-05-16 16:11:021390Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie man einen Maus-Hover-Effekt basierend auf jQuery erstellt. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt:

1. HTML erstellen:

<ul>
<li><a href="/tv"><img src="images/tv_off.gif" class="mainnav"></a></li>
</ul>

2. Wählen Sie die Klasse von .mainnav aus:

$(".mainnav").hover(
 function () {
 },
 function () {
 }
);

3. Erstellen Sie die Variable imgPath und geben Sie den Bild-SRC an:

$(".mainnav").hover(
 function () {
  // Grab the source
  var imgPath = $(this).attr("src");
 },
 function () {
  // Grab the source
  var imgPath = $(this).attr("src");
  }
);

4. Suchen Sie die Zeichenfolge „off“ und ersetzen Sie sie durch „on“:

$(".mainnav").hover(
 function () {
  // Grab the source
  var imgPath = $(this).attr("src");
  // Replace the path in the source
  $(this).attr("src",imgPath.replace("off", "on"));
 },
 function () {
  // Grab the source
  var imgPath = $(this).attr("src");
  // Replace the path in the source
  $(this).attr("src",imgPath.replace("on", "off"));
  }
);

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.

Stellungnahme:
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