Sélection de plusieurs HOVER simultanément

Version imprimable

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:

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:

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);
  }
}

23/02/2022, 11h01
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
23/02/2022, 15h46
NoSmoking
Bonjour,

Citation:

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:

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 !
23/02/2022, 17h08
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 
Code:

1 2 ico Texte lien 
La 1er contient une balise que je souhaite déclencher au passage de la souris sur n'importe quel .
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:

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 :)
24/02/2022, 09h09
NoSmoking

Citation:

je ne connais absolument pas jquery pour le moment,

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