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.