Bei Hover wird weiteres Element gezeigt

Hover-Element

Hallo!

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 {
    […]
    /* erst mal unsichtbar! */
    display: none;
}

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