[Résolu] Img:hover tooltip en display:block

Bonjour à tous j'aimerai avoir une confirmation SVP, je dois créer une info bulle lors d'un hover sur une image. Voici le code HTML que j'ai mis :

<!-- ceci est l'image où je fais mon hover -->
<img class="ico-errors" src="images/errors-form/p-error.png" width="25" height="25" alt="">
<!-- En dessous c'est ma bulle info -->
<div class="box-errors">
   <img src="images/errors-form/arrow-errors.png" width="12" height="28" alt="">
   <div class="content-message"></div>
</div>

Ce que je souhaiterais c'est quand je suis en hover sur l'image. Ma div.box-errors s'affiche donc en display:block;

Voici le code CSS, le HOVER fonctionne sur l'image mais il ne me fait pas apparaître ma div. Est ce bien parceque ma div n'est pas enfant à l'image ?

img.ico-errors{
  float:left;
  position:relative;
  }
img.ico-errors:hover{
  cursor:pointer;
  }
.box-errors{
  position:absolute;
  z-index:1000;
  top:0;
  left:0;
  display:none;
  width:150px;
  height:50px;
  background-color:black;
  }
img.ico-errors:hover .box-errors{
  display:block;
  }

Have a nice day !

C'est normal, ta div.box-errors n'est pas dans ton image.

Tu dois écrire

img.ico-errors:hover + .box-errors{
  display:block;
  }

Un petit tour sur les tutos & articles d'Alsa devraient te permettre de mieux comprendre les sélecteurs css

Bonne continuation !!

Encore une foi Ten merci. ça marche

Je ne manquerais pas de voir et d'APPRENDRE les tutOs d'alsacreations pour les sélecteurs.

Cordialement

Résolu et encore merci