der-webentwickler.net Codeschnipsel . PHP . MySQL . JavaScript

jQuery: Das nächste Element ansprechen

Unser Ziel ist es, bei einem Hover das nächste Element einzublenden. Wie das mit jQuery realisiert werden kann, möchte ich hier einmal kurz erläutern.

Die HTML Struktur

<a href="#1" title="1">Link</a>
<div class="box">Beschreibung 1</div>
<a href="#2" title="2">Link 2</a>
<div class="box">Beschreibung 2</div>
<a href="#3" title="3">Link 3</a>
<div class="box">Beschreibung 3</div>

Nach jedem a Element gibt es ein DIV mit der Klasse "box", diese ist per CSS standardmässig auf "display: none;". Ziel ist es nun bei einem Hover auf das a Element, die folgende DIV Box anzuzeigen.
Dazu setzen wir jQuery mit einem kleinen Codeschnipsel ein.

Das JavaScript

$(document).ready(function(){
 $('a').hover(function(){
  $(this).next("div").fadeIn("slow");
 }, function(){
  $(this).next("div").fadeOut("slow");
 });
});

Sobald die Maus über das a Element bewegt wird, wird die nächste DIV Box mit dem Befehl fadein eingeblendet. Beim verlassen wird sie wieder ausgeblendet.

Autor: Rene Kreupl

Bloggt über WebEntwicklung und Fotografie