Comprendre le sélecteur css ~ (tilde)
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 :
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:
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:
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.
