Discussion :

[klemjul]

Bonjour,

EDIT ' Ce bug n'apparait pas sur edge, uniquement sur firefox et chrome '

Pour vous expliquez mon probleme je code actuellement le header de mon theme wordpress j'ai un flex row avec 3 item '<div>'.

-Le premier est une liste '<ul> ' flex row avec 3 autres item '<li>' , ces li contiennent un lien '<a>' et deux span '<span>' (les deux span me servent a faire une petite animation css avec une transition sur 'width :')

-Le deuxieme est une image

-Le troisieme est la meme chose que le premier

les span sont en z-index:2 alors que les li sont en z-index:1

au survol d'un des liens , les deux span grandissent pour encadre le lien (voir image ci-dessous), seulement , la span de gauche est toujours au dessus de mon li , ce qui n'est pas du tout user friendly, en effet nous somme obliger de sortir la souris de la liste pour pouvoir hover les lien a gauche de celui selectionnez


J'ai beau chercher depuis quelques heures je tourne en rond et n'arrive pas a deceler le probleme.

Pourquoi la SPAN de gauche est toujours devant mon LI alors qu'elle ne devrait pas?


STRUCTURE HTML

Code html :

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
 
<div class="logo-bar">
            <ul id="ul-l">
                <li class="li-1"><a href="#" style="opacity: 1;">Accueil</a>  
                    <span class="sp-1"></span>
                    <span class="sp-2"></span>
                </li>
                <li class="li-2"><a href="#" style="opacity: 1;">Nous connaitre</a>  
                    <span class="sp-1"></span>
                    <span class="sp-2"></span>
                </li>
                <li class="li-3"><a href="#" style="opacity: 1;">Nos Machines</a>  
                    <span class="sp-1"></span>
                    <span class="sp-2"></span>
                </li>
            </ul>
            <img src="" alt="" class="img-d">
            <ul id="ul-r">
                <li class="li-1"><a href="#" style="opacity: 1;">Nos Machidnes</a> 
                    <span class="sp-1"></span>
                    <span class="sp-2"></span>
                </li>
                <li class="li-2"><a href="#" style="opacity: 1;">Contact</a> 
                    <span class="sp-1"></span>
                    <span class="sp-2"></span>
                </li>
                <li class="li-3"><a href="#" style="opacity: 1;">Devis Online</a> 
                    <span class="sp-1"></span>
                    <span class="sp-2"></span>
                </li>
            </ul>
<div>

CODE CSS

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
 
.logo-bar {
  border-bottom: 1px solid #665e52;
	z-index:0;
}
 
.logo-bar img {
  width: 70%;
  -webkit-transition: width 0.5s;
  transition: width 0.5s;
  height: auto;
  margin: auto;
  border-radius: 10px;
}
 
@media screen and (min-width: 1024px) {
  /* TOP BAR */
  .head-top .top-bar-contain {
    padding: 5px 10%;
  }
  .top-bar {
    width: 30%;
    margin: 0;
  }
  /* LOGO BAR */
	.logo-bar{
		margin-top:0;
		background-color:white;
	}
  .logo-bar img {
    width: 20%;
  }
  .logo-bar ul {
    width: 42.5%;
    height: auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .logo-bar ul li {
    width: 30%;
    text-align: center;
    margin-top: 0px;
  }
 
  .logo-bar ul li a {
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
    text-decoration: none;
    color: #665e52;
    padding: 30px 0;
  }
  .logo-bar #ul-l li {
    margin-left: 0;
  }
  .logo-bar #ul-r li {
    margin-right: 0;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
  }
  /* ###################################################################
###################################################################
###################################################################
 
ANIMATION PC */
.logo-bar ul li{
  z-index:2;
  background-color :red;
}
.logo-bar ul li span {
  z-index: 1;
  display: inline-block;
}
.logo-bar ul li .sp-1 {
  content: '';
  position: absolute;
  width: 0%;
  height: 150%;
  top: -40%;
  left: 0;
  -webkit-transition: width 0.5s;
  transition: width 0.5s;
}
.logo-bar ul li .sp-2 {
  content: '';
  position: absolute;
  width: 0%;
  height: 150%;
  top: -40%;
  right: 0;
  background-color: #242279;
  -webkit-transition: width 0.5s;
  transition: width 0.5s;
}
.logo-bar ul li:hover a {
  color: #E8A14A;
  font-size: 15px;
}
.logo-bar #ul-l {
  position: relative;
}
.logo-bar #ul-l .sp-1 {
  background-color: #242279;
}
.logo-bar #ul-l .sp-2 {
  background-color: #E8A14A;
}
.logo-bar #ul-l .li-1:hover .sp-1 {
  width: 2vw;
}
.logo-bar #ul-l .li-1:hover .sp-2 {
  width: 26vw;
}
.logo-bar #ul-l .li-2:hover .sp-1 {
  width: 13vw;
}
.logo-bar #ul-l .li-2:hover .sp-2 {
  width: 13vw;
}
.logo-bar #ul-l .li-3:hover .sp-1 {
  width: 26vw;
}
.logo-bar #ul-l .li-3:hover .sp-2 {
  width: 2vw;
}
.logo-bar #ul-r {
  position: relative;
}
.logo-bar #ul-r .sp-1 {
  background-color: #E8A14A;
}
.logo-bar #ul-r .sp-2 {
  background-color: #242279;
}
.logo-bar #ul-r .li-1:hover .sp-1 {
  width: 2vw;
}
.logo-bar #ul-r .li-1:hover .sp-2 {
  width: 26vw;
}
.logo-bar #ul-r .li-2:hover .sp-1 {
  width: 13vw;
}
.logo-bar #ul-r .li-2:hover .sp-2 {
  width: 13vw;
}
.logo-bar #ul-r .li-3:hover .sp-1 {
  width: 26vw;
}
.logo-bar #ul-r .li-3:hover .sp-2 {
  width: 2vw;
}
}

Je vous remercie d'avance pour votre aide , n'hesitez pas a me poser toute question succeptible de vous aidez a comprendre la source du probleme

[klemjul]

EDIT Modification du code CSS pour plus de clarte