Comprendre le sélecteur css ~ (tilde)

**5azor** · 04/11/2018, 20h02

Bonjour,

Je voulais comprendre comment marchait exactement le sélecteur ~.

D'après ce que j'en ai compris ça permet de sélectionner toutes les balises dans une balise sans compté la première.

Par exemple :

Code :

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

div ~ p

ne prendra que les p dans les divs sauf le premier.

Alors que je voulais réaliser un petit bout de code pour déplacer un texte lorque la souris est sur une image :

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
<!doctype html>
<html lang="fr">
    <head>
        <title>UNSTOPABLE</title>
        <link rel="stylesheet" href="css/boutique.css">
    </head>
    <body>
            <section class = "object">
                <img src="images/watch.jpg"/>
                    <header class="deplace" >
                        <h2 >watch<h2>
                    </header>
            </section>
    </body>
</html>

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
.object{
  position: relative;
   text-align: center;
 
}
 
.deplace{
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}
 
section img{
 
  width : 20%;
  transform: scale(1);
  transition: 0.2s ease-in-out;
  margin-left:0%;
 
}
 
 
section img:hover{
  opacity:0.5;
  cursor: pointer;
  transition: 0.2s ease-in-out;
  transform: scale(1.1);
}
 
section img:hover ~ .deplace{
  left: 20%;
}

Je n'ai donc pas compris pourquoi le texte bougeait !

De plus si vous avez un moyen pour que ça marche sans JS et que je puisse mettre mon header avant mon image ce serrait sympa !

Merci de l'attention porté à mon problème.

Invité · 04/11/2018, 21h36

Bonjour,

Je confirme : tu n'as pas compris.

Comprendre le sélecteur css ~ (tilde)

CSS

Vue hybride

Discussions similaires

Partager

Partager