[HTML][CSS]Menu

J'ai ajouté le code, le mot accueil est bien aligné mais j'aimerai bien qu'il s'affiche qu'au survol de la souris au fur et à mesure que la div grandit .

Merci :)

PS: Dites-moi si je vous en demande trop :/

Ah pardon j'avais zappé la 2e partie de la question ^^

Voici le code :

#mini_menu a{
      visibility: hidden;
}

#mini_menu:hover a{
      visibility: visible;
}

Et pour que l'effet de transition fonction, modifie dans ton code ceci :

transition: width 1s;

par cela :

transition: all 1s;

Merci pour vos réponses mais je pense que le mieux serais d'utiliser du Javascript.

Du coup j'ai essayé de coder sa, mais sa fait cracher mon navigateur xD

Code HTML:

<div id="mini_menu">
   <img src="index.png"/>
   <a href="index.html" id="okk">Accueil</a>
</div>

Code JS:

<script>
 while (document.getElementById('mini_menu').style.width != "100px"){
  document.getElementById('okk').style.visibility = "hidden";
 }
</script>

Oui il fait faire gaffe avec ce genre de boucles, ça peut prendre de la ressource inutilement !

Pourquoi ne pas passer par du css ? Pour la rétro-compatibilité ? (parce que ça marche même sur les anciens navigateurs qui supportent le css2)

Si tu tiens au js, je te conseille d'utiliser la bibliothèque jQuery :
- Tu la télécharges ici : https://jquery.com/download/
- Tu fais appel au fichier js dans ton html
- Et tu places ce code entre </body> et </html> :

<script type="text/javascript">
     $('#mini_menu").hover(function(){
          $('#okk').css('visibility','visible');
     }, function(){
          $('#okk').css('visibility','hidden');
     });
 }
</script>

Voilà et dans le fichier css tu dis bien que #okk a la visibility hidden.

J'ai pas réussi à faire marcher le code mais c'est pas grave je trouverais un autre moyen :) .