Discussion :

[gesualda]

Bonjour à tous,

Ne connaissant absolument rien au développement Jquery, je sollicite votre aide et surtout explication si c'est possible.

J'ai donc un script avec son css que j'ai simplifié au maximum pour l'exemple et principe. Ce que j'aimerai faire et qui n'est pas possible en css, c'est que lorsque l'on fait un "hover" sur la balise "a" (cela peut être une autre selon le besoin), cette opération déclenche les autres "hover" simultanément contenu dans le même conteneur.

Merci

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
 
<nav class="cnt">
  <ul>
    <li>
      <a href="#">
        <span class="sp-01"> <i>ico</i> </span>
        <span class="sp-02"> Texte lien </span>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="sp-01"> <i>ico</i> </span>
        <span class="sp-02"> Texte lien </span>
      </a>
    </li>
  </ul>
</nav>

Code CSS :

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
body {
  color: white;
}
 
*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
 
ul {
  background: rgb(33, 47, 60);
  list-style-type: none;
  height: 15rem;
  display: flex;
  justify-content: center;
}
 
li {
  background: rgb(46, 64, 83);
  margin-left: 5px;
  width: 200px;
  text-align: center;  
}
 
a {
  color: white;
  text-decoration: none;
 
  &:hover{
     background: transparent;
  }
}
 
span {
  display: block;
  font-size: 1.4em;
}
 
.sp-01 {
  padding: 1rem 0 1rem 0;
  background: rgb(118, 68, 138);
}
 
.sp-02 {
  padding: 2.5rem 0 2.5rem 0;
  background: rgb(155, 89, 182);
  transition: border .2s ease-in-out, padding .4s ease-in-out ; 
 
  &:hover{        
    padding-top: 3.6rem;
    border-bottom: 4px solid #ccfa02;
    }  
}
 
i {
  font-style: normal;
  background-color: rgba(255, 255, 255, 0.1);
  display: inline-block;
  margin: 0 auto;
  padding: 0.8em;
  border-radius: 50%;
  box-shadow: 0 0 0 30px transparent;
  transform: translate3d(0, 0, 0);
  transition: box-shadow 0.6s ease-in-out;
 
  &:hover {
    background-color: rgb(250, 11, 11);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2);
  }
}

[SpaceFrog]

Je sortirais les animations du hover pour les mettre dans une classe dédié.
Puis sur le mouseenter du a, j'attribuerais ces classes aux childnodes en toggle

[NoSmoking]

Bonjour,

c'est que lorsque l'on fait un "hover" sur la balise "a" (cela peut être une autre selon le besoin), cette opération déclenche les autres "hover" simultanément contenu dans le même conteneur.

en CSS cela donne

Code css :

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

1
2
3
4
5
6
element_parent:hover {
  /* les déclarations à appliquer à element_parent */
}
element_parent:hover element_enfant {
  /* les déclarations à appliquer à element_enfant */
}

mais pas sûr d'avoir compris !

[gesualda]

Tout d'abord merci à tous les deux pour vos interventions.
En effet, tu as raison, j'aurai pu m'expliquer plus clairement.

il y a 2 balises <span>

Code html :

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

1
2
<span class="sp-01"> <i>ico</i> </span>
        <span class="sp-02"> Texte lien </span>

La 1er contient une balise <i> que je souhaite déclencher au passage de la souris sur n'importe quel <span>.
Comme précisé, je ne connais absolument pas jquery pour le moment, j'ai donc recherché et je fais ceci qui ne fonctionne pas. !

Code js :

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

1
2
3
4
5
6
7
$(document).ready(function (){
 
  $("span").hover(function(){
    $("i").css("background-color", "box-shadow"); 
 
  });  
})

Je pensais pouvoir récupérer le code CSS concernant <i>

[NoSmoking]

je ne connais absolument pas jquery pour le moment,

dans ce cas, voir comment utiliser : jQuery.css() !