Bei Hover wird weiteres Element gezeigt

Hover-Element

Hallo!

&
Das Et-Zeichen, auch Und-Zeichen oder kaufmännisches und-Zeichen, ist ein in bestimmten Fällen verwendbares Ersatzzeichen für das Wort „und“ (lat. et). Es wird umgangssprachlich auch als Kaufmanns-Und, kaufmännisches Und oder Firmen-Und bezeichnet, da es im Geschäftsbereich vielfach verwendet wird und in zahlreichen Firmennamen enthalten ist. Wikipedia

Code

Schaut Euch den Source-Code an, um den ganzen Code zu sehen!

<!-- html -->
<div>
    Hover-Element
    <p>Hallo!</p>
</div>

/* CSS */
div {
    background-color: #369;
    position: relative; /* Eltern-Element! */
    […]
}

/* das <p> im <div> */
div p {
    […]
    position: absolute;
    left: 200px;
    top: 15px;

    /* erst mal unsichtbar! */
    display: none;
}

/*
    wenn sich der Cursor auf dem <div> befindet,
    wird das <p> sichtbar
*/
div:hover p {
    display: block;
}