Discussion :

[thirt750530]

Bonjour,

en fait, je me demande comment je peux faire pour entourer l'icône et le texte de mon menu d'un cercle oval lors du survol d'un élément du 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 :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<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>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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

[NoSmoking]

Bonjour,

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

As-tu essayé de jouer avec les propriétés border et border-radius par exemple.