CSS3 InfoBox mit jQuery oder CSS

Heute wollte ich mich kurz damit auseinander setzten, wie man eine InfoBox für Begriffe in einem Text programmiert. Dazu soll unter dem Begriff ein kleines Fenster, entweder mit jQuery oder durch eine einfache CSS verkettung angezeigt werden. Außerdem wollte ich wieder ein wenig CSS3 Effekte für die InfoBox einsetzten. Kommen wir zuerst zu der Gestaltung mit CSS:

/*Der zu erklärende Begriff*/

.info{

color:#444;
background-color:#DDD;
position: relative;
}

/*Die InfoBox*/

.infotext{
font-size:0.75em;
padding:5px;width:200px;display:none;
position:absolute;top:25px;left:0px;
background-color:#000;color:#FFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0px 0px 7px #000;
-webkit-box-shadow: 0px 0px 7px #000;
box-shadow: 0px 0px 7px #000 ;
border:1pt solid #666;
}
Und so sieht der HTML Code dazu aus:
Dies ist ein
<span class=“info“>Flie&szlig;text
<span class=“infotext“>Beschreibung des Wortes</span>
</span>
. Weiter im Text…

CSS Lösung

Für eine einfache CSS Lösung muss die :hover Eigenschaft verwendet werden:

.info:hover .infotext{display:inline;}

jQuery Lösung

Hier wird das hover() Event genutzt und die Box wird mit show() animiert geöffnet. Hier nun der Code:

<script type=“text/javascript“ src=“http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js“></script&gt;
<script type=“text/javascript“ language=“javascript“ charset=“utf-8″>
// <![CDATA[
$(document).ready(function(){
$(’span.info‘).hover(function(){
$(this).find(’span.infotext‘).show(„fast“);
},function(){
$(this).find(’span.infotext‘).hide(„fast“);
});
});
// ]]>
</script>

Hier nun das Ergebis:

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s