CSS | Faire une apparaître une div au survol

Comment faire apparaître une div html en passant la souris dessus et sans scripts diaboliques. L’exemple décrit ci-dessous la fonction recherche du site, vous la trouverez plus haut, par ici

<div class="box">
    <a href="#"><i class="ico-search"></i></a>
        <div class="hidden">
            <?php include (TEMPLATEPATH . "/searchform.php"); ?>
        </div>
</div>

<i class="ico-search"></i> est ici un icône mais peut être remplacer par n’importe quoi, la section icône décrite ci-dessous sera inutile dans ce cas.

/* 'Icone Recherche' */
@font-face {
    font-family: 'athemes-glyphs';
    src: url('../fonts/fontawesome-webfont.eot?v=4.2.0');
    src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
    }
.ico-search:before {content: '\f002';}

/* 'Afficher/Cacher' */
<strong>.hidden {display: none;}</strong>
<strong>.box:hover > .hidden {
    display: block;
    position: relative;</strong>
    width: 250px;
    height: 50px;
    background-color: #060608;
    padding: 25px 20px 10px 20px;
    border-top: 2px solid #ff2828;
    margin: 51px -2px 0 0;
    <strong>z-index:198;</strong>
<strong>}</strong>

Est noté en gras ce qui est indispensable, le reste c’est de l’habillage, la fonction z-index n’est pas indispensable mais peut s’avérer utile .

Laisser un commentaire

Votre adresse de messagerie ne sera jamais publiée, ou utilisée à des fins commerciales. Les champs obligatoires sont indiqués avec des *.

Vous pouvez utiliser les balises de mise en forme