Hoverbox mit CSS

Nein, es geht nicht um Werbepopups. Ich wollte einer Seite eine Erklärung hinzufügen, fand dafür keinen passenden Ort, und versteckte sie daher hinter einem Fragezeichen. Bei einem Klick auf dieses oder beim Hovern über es erscheint die Box mit der Erklärung, sanft eingeblendet. Umgesetzt mit reinem CSS, ohne Javascript.

So sieht das Ergebnis dann aus:

So der vollständige HTML-Code:

<div id="explanation">
    <a id="explanation-button" href="#explanation-container">?</a>
    <div id="explanation-container">
        <a href="" id="explanation-close">X</a> 
        <h2>Erklärung</h2>
    </div>
</div>

Und so das CSS:

#explanation {
    display: inline;
    left: -100%;
    width: 100%;
    position: fixed;
}

#explanation-button {
    position: fixed;
    right: 1em;
    opacity: 0.3;
}

#explanation-button:hover {
    cursor: pointer;
}

#explanation-close {
    float: right;
    display: none;
    text-decoration: none;
}

#explanation-container:target #explanation-close {
    display: block;
}

#explanation-container {
    opacity: 0;
    display: inline-block;
    position: relative;
    background-color: #fdfdfd;
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    width: 60%;
}

#explanation:hover #explanation-container, #explanation-container:target {
    opacity: 1;
    left: 100%;
}

Viel Code aus einmal. Ich will Schritt für Schritt die einzelnen Elemente erklären:

<div id="explanation">

Das umarmende div enthält alle weiteren Inhalte, um auf ein :hover-Event reagieren zu können und dann die ganze Box einzublenden. Sie wird anfang im CSS auf display:inline gesetzt, damit es die anderen Elemente nicht stört, dann mit position: fixed fixiert und schließlich mit left: -100% aus dem Sichtfeld geschoben.

<a id="explanation-button" href="#explanation-container">?</a>

Der Link ist das einzige Element, das immer zu sehen sein wird. Er wird durch das position:fixed aus der Box herausgelöst, dadurch nicht mit der Elternbox nach links verschoben. Gedacht ist: bei einem Klick (per :target) oder beim Darüberfahren (per :hover) wird das Elternelement sichtbar und dadurch die ganze Erklärung.

<div id="explanation-container">

Der Container mit der eigentlichen Erklärung. Im CSS davon kann man gut sehen, wie die Animationen in CSS auf diese Box gesetzt werden. Durch die transition-Eigenschaft wird gesteuert, wie ein Änderung von Werten wie opacity animiert werden. Opacity ist nebenbei auf 0, damit ist die Box erstmal unsichtbar. Man beachte auch die Eigenschaft display: inline-block.

CSS: #explanation:hover #explanation-container, #explanation-container:target

Das ist der Kern des ganzen Codes! Wird über die Box gefahren, deren einziges sichtbares Element das ? ist, oder wird #explanation-container Ziel eines Ankers, wird die Box nach rechts verschoben und sichtbar gemacht. Durch die transition-Eigenschaft der Box (siehe oben) wird diese Statusänderung animiert: Die Box wird hereingeschoben und eingeblendet, anstatt direkt zu erscheinen.

<a href="" id="explanation-close">X</a>

Nach einem Klick auf das ? wird die Box dauerhaft eingeblendet, da #explanation-container mithilfe von :target eingeblendet wird. Es wurde also ganz normal die Seite geladen, nur dass #explanation-container hinten stand, ein Anker. Um das wieder auszublenden, muss die Seite wieder ohne den Anker geladen werden, und genau das macht dieses X.

Man kann das ganze auf der Demoseite oder im Praxiseinsatz (das Fragezeichen ganz rechts) nochmal genau anschauen.