Bonjour,

en fait, je me demande comment je peux faire pour entourer le texte de mon menu d'un cercle oval lors du survol d'un élément de ce menu.

Je pense qu'il faut passer par les transformations afin de pouvoir dessiner un cercle autour du texte lors du survol sans toucher aux éléments qui se trouvent en-dessous ou au-dessus de ce cercle ?

Quand j'essaie de dessiner le cercle en modifiant les margin ou padding, il touche également à l'image que j'ai mise à côté du texte comme icône.

Voici mon code :

<div class="menu-item">
  <a href="#" class="icon-home"><span class="menu-item-text">Accueil</span></a>
</div>
<div class="menu-item">
  <a href="#" class="icon-home"><span class="menu-item-text">Contact</span></a>
</div>
<div class="menu-item">
  <a href="#" class="icon-home"><span class="menu-item-text">Agenda</span></a>
</div>

.menu-item {
  color: #000;
  height: 35px;
}

.icon-home {
  background: url(img/home-black.png) no-repeat;
  margin: 20px 0 0 30px;
}

.menu-item-text {
  padding: 0 0 0 113px;
  width: 140px;
  display: inline-block;
  position: absolute;
  top: 85px;
  left: -45px;
  color: #000;
}

.menu-item:hover {
  color: rgb(68, 114, 196);
  height: 50px;
  width: 100px;
  background-color: #555;
  border-radius: 50%;
}

.icon-home:hover
{
  background: url(img/home-blue.png) no-repeat;
  color: rgb(68, 114, 196);
}

.menu-item-text:hover {
  color: rgb(68, 114, 196);
}

Merci d'avance

Sincères salutations,
Thierry

bonjour, 
dans : 

.menu-item:hover {
  color: rgb(68, 114, 196);
  height: 50px;
  width: 100px;
  background-color: #555;
  border-radius: 50%;
}

tu définie ton border-radius, mais tu ne définie pas ton border en lui-même, qui doit se présenter comme ça :

border: taille (ex: 2px), l'état ( ex: solid ), couleur ( ex: #00000);

ce qui donnerait par exemple : 

.menu-item:hover {
  color: rgb(68, 114, 196);
  height: 50px;
  width: 100px;
  background-color: #555;
  border : 1px solid #00000;
  border-radius: 50%;
}

Bonjour MiNiMan.8.6,

tout d'abords, je tenais à vous remercier pour votre réponse à mon message.

En fait, je ne suis pas intéressé de voir la bordure. Ce que je veux simplement faire, c'est faire apparaître une ellipse autour de l'icône et texte du menu comme dans twitter ou gmail apparemment.

Le problème, c'est que mon icône se déplace en même temps que le bloc quand je modifie les margin ou padding. Donc, j'ai l'impression qu'on doit utiliser les transformations/transitions afin qu'il n'y ait que le bloc qui bouge et pas l'icône.

Merci d'avance

Bonne soirée
Thierry 

Effectivement, j'avais mal lu, 

et j'ai du mal avec les inline-bloc

tu veux un truc ce genre ?

.menu-item {
  color: black;
  height: 35px;
  width: 200px;
  display: inline-block;
}
 
.icon-home {
  background: url(img/home-black.png) no-repeat;
  margin: 20px 0 0 30px;
}
 
.menu-item-text {
  padding: 0 25%;
  margin: auto;
  width: 140px;
  height: 80px;
  padding: 25px;
  display: inline-block;
 
  color: black;
}
 
.menu-item:hover {
  color: rgb(68, 114, 196);
  height: 80px;
  /* width: 100px;  */
  background-color: wheat;
  border-radius: 50%;
}

.icon-home:hover
{
  background: url(images/logo.png) no-repeat;
  background-position: left;
  color: black;
  background-size: 140px;
  width: 140;
  height: 80px;
 color: white;
  
}
 
.menu-item-text:hover {
  color: white;
}

 Je ne sais absolument pas si c'et ce que tu recherches, mais du coup, le hover ne décale pas le texte.

-
Edité par MiNiMan.8.6 23 mars 2020 à 19:17:10